web-dev-qa-db-fra.com

Comment puis-je placer du texte à l'intérieur d'un ion-toggle

Actuel j'ai un ion-toggle qui ressemble à ceci

enter image description here

Je veux faire ça 

enter image description here

Y a-t-il un moyen d'y arriver? J'ai lu quelque part que je pourrais utiliser ng-true-value et ng-false-value mais cela ne semble pas faire ce que je recherche

javascripthtmlangularjstoggleionic
12
esastincy

Les attributs ng-true-value et ng-false-value doivent fournir à l'expression ng-model une certaine valeur personnalisée lorsque la case à cocher est cochée. Le framework ionic ne l'utilise pas pour afficher du texte dans la bascule.

Mais c'est certainement possible :)

Ci-dessous une directive qui fait. Slap ion-toggle-text sur tout ion-toggle existant et vous êtes prêt à partir. Le texte d'activation/désactivation peut être défini avec les attributs ng-true-value/ng-false-value ou avec une valeur séparée par ; avec l'attribut ion-toggle-text. Si aucun texte n'est fourni, les valeurs par défaut sont "activé" et "désactivé".

<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 peut être trouvé ici .

Prendre plaisir.

19
null

J'ai également essayé sans succès, la solution la plus proche étant de placer un texte non/oui à gauche du bouton bascule, comme ceci:

 enter image description here

 enter image description here

Lien pour exemple de code: http://play.ionic.io/app/f3ad6568b33c

Le code actuel: 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: // Ceci est une variable dans mon contrôleur $ 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;
  }
2
CommonSenseCode

En regardant à travers le code source , cela ne semble pas être possible. Il est à noter qu'il n'y a pas d'options pour coller du texte dans le bouton bascule, et que la seule balise transclude ne concerne pas non plus le bouton bascule. Vous pouvez bien sûr insérer leur code et le faire vous-même, mais je ne pense pas que cela en vaut la peine.

1
David Grinberg

J'ai mis à jour la solution décrite dans la réponse pour prendre en charge Ionic 1.0.3. Le Plunker peut être trouvé ici

L'exemple HTML ci-dessous montre également l'utilisation de la propriété ng-disabled.

  <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>
0
zebra1024