web-dev-qa-db-fra.com

Ionic 2 Aligner l'étiquette du bouton à gauche

J'ai créé un bouton dans Ionic 2 comme suit:

  <button secondary block round padding style="text-align : left;">
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
    Login
  </button>

J'essaie d'aligner le texte du bouton sur le côté gauche, mais ce n'est pas là. Existe-t-il une version intégrée de Twik pour y parvenir?

ionic-frameworkionic2
12
Prerak Tiwari

Ionic enveloppe le contenu du bouton dans un <span> tag qui a la classe .button-inner. Ainsi, le balisage HTML ressemble à ceci lorsque vous l'inspectez

<button secondary block round padding>
    <span class="button-inner">            
        <ion-icon ios="ios-key" md="md-key" item-right></ion-icon>
        Login
    </span>    
    <ion-button-effect></ion-button-effect>
</button>

Le .button-inner classe applique flexbox propriétés pour positionner le texte et les icônes au centre. Vous pouvez remplacer les justify-content et changez la valeur de center en flex-start et cela indiquera au contenu (le texte et l'icône) de commencer depuis le début de la boîte.

Exemple

Si vous souhaitez l'appliquer à tous les boutons

.button-inner{
    justify-content:flex-start;
}

Si vous souhaitez l'appliquer à un bouton spécifique (où .specific-button est ajouté en tant que classe à un composant de bouton)

.specific-button .button-inner{
     justify-content:flex-start;
}
27
Will.Harris

Vous pouvez utiliser le item-left attribut à l'intérieur de la balise button-. Pas besoin d class="" ou style="".

<button secondary block round padding item-left>
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
    Login
</button>

Plus d'informations ici

0
John

Parce que Ionic utilisez sa classe pour générer des CSS par défaut. Vous devez donc utiliser SASS pour personnaliser CSS.

Par exemple :

<button class="item">
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
     Login
  </button>

fichier styles.scss

.item{
   @extend secondary;
   @extend block;
   text-align : left;
}
0
nahoang