web-dev-qa-db-fra.com

alignement droit pour un bouton en ion-col

J'ai cette grille dans mon application Ionic 2. Existe-t-il un attribut spécifique aux ions pour rendre le bouton affiché à droite de la colonne (rangée)?

<ion-grid>
  <ion-row>
    <ion-col>col 1</ion-col>
    <ion-col>col 2</ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <button ion-button>My button</button>
    </ion-col>
  </ion-row>
</ion-grid>
ionic-frameworkionic2ionic3
16
Hamed

Dans votre cas, vous pouvez ajouter l'attribut float-right ainsi:

<button ion-button float-right>My button</button>

float- {modifier}
Le documentation indique que vous pouvez ajouter l'attribut float-{modifier} pour positionner un élément dans son conteneur.

{modifier} peut être l’un des suivants:
right: L'élément flotte sur le côté droit de son conteneur.
left: L'élément flotte sur le côté gauche de son conteneur.
start: Identique à float-left si la direction est de gauche à droite et flottante à droite si la direction est de droite à gauche.
end: Identique à float-right si la direction est de gauche à droite et float-left si la direction est de droite à gauche.

Exemple:

<div>
    <button ion-button float-right>My button</button>
</div>

item- {modifier}
Pour positionner un élément à l'intérieur d'un ion-item le documentation indique que vous pouvez utiliser item-{modifier}.

Où {modifier} peut être l’un des suivants:
start: placé à gauche de tous les autres éléments, en dehors de l'élément intérieur.
end: placé à droite de tous les autres éléments, à l'intérieur de l'élément intérieur, à l'extérieur du wrapper d'entrée.
content: placé à droite de toute étiquette d'ions, à l'intérieur du wrapper d'entrée.

Exemple:

<ion-item>
    <button ion-button item-end>My button</button>
</ion-item>

Déprécation
Selon la documentation ces noms sont déconseillés:

item-right & item-left

25
robbannn