CODEWITHSUNDEEP
javascripthtmlangularjstoggleionic-framework
esastincy
esastincy

Reputation: 1627

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

Upvotes: 15

Views: 22185

Answers (7)

Jose Moncada
Jose Moncada

Reputation: 11

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

Upvotes: 1

Christine Treacy
Christine Treacy

Reputation: 212

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

Upvotes: 2

Ishita Ray
Ishita Ray

Reputation: 666

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

Upvotes: 3

zebra1024
zebra1024

Reputation: 1

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>

Upvotes: 0

CommonSenseCode
CommonSenseCode

Reputation: 25428

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

Upvotes: 2

null
null

Reputation: 7926

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.

Upvotes: 23

David says Reinstate Monica
David says Reinstate Monica

Reputation: 20139

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.

Upvotes: 1

Related Questions