web-dev-qa-db-fra.com

Ionic élément avec texte aligné à gauche et à droite

J'ai un élément ionic dans une liste ionic. Quelle est la meilleure façon d'aligner à gauche le premier texte et d'aligner à droite le deuxième texte)?

  <div class="item">
    <span>first</span>
    <span>second</span>
  </div>
cssionic-frameworkionic
11
user1283776

Cela peut être fait en utilisant les propriétés CSS de base. il n'y a rien de spécifique à propos de ionic ici. Cela peut être fait en utilisant float:left et float:right Propriétés.

Toujours pour votre référence, vous pouvez passer par cette lien .

18
N-JOY

Dans ionic 2 utilisez simplement

texte-gauche, texte-droit 

<div class="item">
    <span text-left>first</span>
    <span text-right>second</span>
</div>

En savoir plus: - https://github.com/driftyco/ionic/typography.scss

7
aWebDeveloper

Avec Ionic 3 les réponses ci-dessus ne fonctionnaient pas. Avec les éléments ioniques, vous pouvez simplement laisser le texte de gauche intact car il est aligné à gauche par défaut. Avec le texte que vous souhaitez aligner à droite , utilisez simplement le décorateur de fin d'article comme ceci:

<ion-item>
     Name <span item-end>Zack</span>
</ion-item>
5
Zachary Garcia

Vous utilisez également la classe et l'attribut d'ionic pour ce faire. Par exemple

<div class="item row">
   <span align="right" class="col col-50">first</span>
   <span align="left" class="col col-50">second</span>
</div>
2
bobo

Avec Ionic 2 et plus, vous pouvez utiliser le placement des éléments des attributs comme float-left ou float-right sur vos éléments HTML au lieu d'ajouter des propriétés comme float: left; ou float: right; sur votre scss

https://ionicframework.com/docs/theming/css-utilities/#float-elements

<div class="item">
  <span float-left>first</span>
  <span float-right>second</span>
</div>
2
Sudharshan

Ionic utilise les utilitaires CSS. Ils fournissent leur propre façon d'aligner le texte.

<div class="item">
  <span>first</span>
  <span>second</span>
</div>

Plus d'informations sur les utilitaires CSS sur https://ionicframework.com/docs/theming/css-utilities/#text-alignment

0
YATO

J'utilise Ionic 3 et la meilleure réponse que je pense est d'utiliser les balises et les attributs ionic:

<ion-list>
  <ion-item>
    <ion-label>
      this to the left
    </ion-label>
    <ion-label text-right>
      this to the right
    </ion-label>
  </ion-item>
</ion-list>
0
Ari Waisberg