'How can I place text inside an ion-toggle

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

javascripthtmlangularjstoggleionic


Solution 1:[1]

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.

Solution 2:[2]

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:

enter image description here

enter image description here

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;
  }

Solution 3:[3]

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;
 }
}

Solution 4:[4]

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.

Solution 5:[5]

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;
  }
}

Solution 6:[6]

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;
}

Solution 7:[7]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 null
Solution 2
Solution 3 Ishita Ray
Solution 4 David says Reinstate Monica
Solution 5
Solution 6 Terry Windwalker
Solution 7 zebra1024

Related Questions