How can I place text inside an ion-toggle

Question

Current I have a ion-toggle that looks like this

enter image description here

I want to do this

enter image description here

Is there anyway to make this happen? I read somewhere I could use ng-true-value and ng-false-value but that doesnt seem to do what I am looking for

My designer made it. Im not sure if this is possible or not – esastincy Mar 26 '15 at 14:53 — esastincy, Mar 26 '15 at 14:53

score 23 · Accepted Answer · answered Mar 26 '15 at 22:06

The attributes ng-true-value and ng-false-value are to provide the ng-model expression a certain custom value when the checkbox is checked. The ionic framework doesn't use it to display text in the toggle.

But it is certainly possible :)

Below is a directive that does. Slap ion-toggle-text on any existing ion-toggle and you're good to go. On/off text can be set with either the ng-true-value/ng-false-value attributes or with a ; separated value with the ion-toggle-text attribute. If no text is provided it defaults to "on" & "off".

<ion-toggle ion-toggle-text ng-model="simple">
  Simple Example: <b>{{ simple || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text="online;offline" ng-model="customText">
  Custom text: <b>{{ customText || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text ng-true-value="so true" ng-false-value="so false" ng-model="textByValue">
  Text by value: <b>{{ textByValue || 'so false' }}</b>
</ion-toggle>

Plunker can be found here.

Enjoy.

This is great! But worth noting that with current Ionic (1.3.3) the toggle no longer animates for some reason (it does if you remove the ion-toggle-text directive). — Chris Rae, Mar 29 '18 at 21:13
Tried with Ionic 3 and the ion-toggle-text directive does nothing. Perhaps they have removed it. — Terry Windwalker, Apr 04 '22 at 21:20

score 3 · Answer 2 · answered Sep 30 '20 at 16:04

I found a better solution...

<ion-toggle></ion-toggle>

use the css code:

ion-toggle[aria-checked="false"]{
   position: relative;
   width: 70px;
  &::before {
    position: absolute;
    content: "BACK";
    font-size: 10px;
    line-height: 31px;
  }
  &::after {
    position: absolute;
    content: "";
  }
 }
 ion-toggle[aria-checked="true"]{
  position: relative;
  width: 70px;
  &::before {
    position: absolute;
    content: "";
  }
 &::after {
   position: absolute;
   content: "FRONT";
   font-size: 10px;
   line-height: 31px;
   top: 0;
   left: 3px;
   color: #fff;
 }
}

CommonSenseCode · Answer 3 · 2015-09-16T15:06:32.993

I also tried this without any success my nearest solution was placing a no/yes text at the left side of the toggle button like this:

Link for code sample: http://play.ionic.io/app/f3ad6568b33c

The actual code: HTML:

    <div class="toggle-wrapper">
        <span class="toggle-question">Text question here?</span>
        <ion-toggle class="meds-toggle"
                    toggle-class="toggle-energized"
                    ng-model="customText"
                    ng-checked="customText">
          <div class="toggle-text">{{customText ? "YES" : "NO"}}</div>
        </ion-toggle>

  </div>

JS: //This is a var inside my controller $scope.customText = false;

CSS:

#meds-refund-form .toggle-wrapper {
  display: inline-block;
  width: 100%;
  margin-bottom: -20px;

}

  .toggle-question {
    font-size: $default-font-size -3;
    float: left;
    margin: 10px;
  }

    .toggle-text {
    width: 10%;
    color: $bright-yellow;

  }

    .meds-toggle {
    margin: 10px;
    width: 5%;
    float: right;
    border: none;
    height: 50px;
  }

@durron597, I just included my code there's no need to downvoted when I'm being helpful — CommonSenseCode, Sep 16 '15 at 15:07
Adding a link to your code is not helpful. Now that you've added your code to the answer itself, I've removed my downvote — durron597, Sep 16 '15 at 15:07
@Coding Mc Codington, hi.. can you pls let me know how to achieve this in ionic2 now? — csharpnewbie, Feb 26 '17 at 03:32

Christine Treacy · Answer 4 · 2021-06-29T12:38:59.110

Tried the solution Ishita Ray posted but I had to tweek it so I'll include the css here:

ion-toggle {
    width: 100px;
    margin-bottom: 6px;
    position: relative;
    color: $rivly-white;
    font-size: 15px;
    line-height: 31px;

    --background: #92949c;
    --background-checked: #556ee6;

    --handle-background: #ffffff;
    --handle-background-checked: #ffffff;
}

ion-toggle[aria-checked="false"]{

   &::after {
    position: absolute;
    content: "offline";
    top: 0;
    right: 6px;
   }
}

ion-toggle[aria-checked="true"]{

  &::after {
    position: absolute;
    content: "online";
    top: 0;
    left: 6px;
  }
}

score 1 · Answer 5 · answered Mar 26 '15 at 14:57

Looking through the source code, this does not seem to be possible. Of note is that there are no options for sticking text in the toggle button, and the only transclude tag does not relate to the toggle button either. You can of course fork their code and do it yourself, but I dont think its worth it.

score 1 · Answer 6 · edited Apr 05 '22 at 09:33

enter image description here

I figured how to make it by just simply forgetting about the ion-toggle and implementing it myself, I mean, sounds funny but it resulted to me and you don't need hundreds of lines, so I will leave it here so it can be helpful for other people!

Typescript

    pendientes=true;
    changeTab() {
        this.pendientes = !this.pendientes;
    }

Html

    <div class="selector"> 
        <ion-button class="ion-no-margin" mode="ios"(click)="changeTab()"  
[color]="pendientes? 'primary':'white'">
          Pendientes
        </ion-button>
        <ion-button class="ion-no-margin"  mode="ios" (click)="changeTab()" [color]="pendientes? 'white':'primary'">
          No verificados
        </ion-button>
      </div>

Css

.selector{
    display: flex;
    box-shadow: 0px 2px 2px rgb(0 0 0 / 25%);
    border-radius: 10px;
    background-color: #840868;
}

score 0 · Answer 7 · answered May 24 '16 at 14:22

0

I updated the solution outlined in the answer to support Ionic 1.0.3. The Plunker can be found here

HTML Example below shows using ng-disabled property also.

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme">
    Simple Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme" ng-disabled="true">
    Disabled Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text="online;offline"  ng-model="customText" toggle-class="toggle-my-theme">
    Custom text: <b>{{ customText || false }}</b>
  </ion-toggle>
  <ion-toggle ng-model="customText" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

answered May 24 '16 at 14:22

zebra1024

1

hi.. can you pls let me know how to achieve this in ionic2 now? – csharpnewbie Feb 26 '17 at 03:32
@csharpnewbie have you found the same solution for Ionic2? I want the same feature in Ionic-3. thanks – Punita May 01 '18 at 07:00
@Punita - No. I did not. Sorry, could not be of much help. – csharpnewbie May 02 '18 at 16:07

How can I place text inside an ion-toggle

7 Answers7

Linked