web-dev-qa-db-fra.com

Ionic: Comment afficher un élément d'ions sur plusieurs lignes?

LA SITUATION:

J'utilise Ionic pour créer une application.

Je dois afficher une liste d’informations concernant certaines personnes ..__ Pour obtenir le résultat, je me sers de la liste ionic<ion-list> ainsi que de <ion-item> car la mise en page proposée correspond exactement à mes besoins.

Le seul problème est que chaque <ion-item> semble être obligé de rester sur une seule ligne, coupant le texte supplémentaire qu'il contient, comme le montre l'image:

enter image description here

LE CODE:

<ion-list>
    <ion-item class="item"> Name: <b> {{ person.name }} </b> </ion-item>
    <ion-item class="item"> Email: <b> {{ person.email }} </b> </ion-item>
    <ion-item class="item"> Title: <b> {{ person.title }} </b> </ion-item>
    <ion-item class="item"> Bio: <b> {{ person.bio }} </b> </ion-item>
</ion-list>

PLUNKER:

Voici un plunker qui recrée la situation. Vous pouvez essayer de redimensionner le navigateur ou les fenêtres internes et vous pouvez voir comment ion-item coupe le contenu supplémentaire.

http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview

LA QUESTION:

Comment puis-je afficher le contenu supplémentaire dans un élément <ion-item>? 
Est-il possible d'afficher le contenu sur plusieurs lignes?

javascriptandroidcssangularjsionic-framework
19
FrancescoMussi

EDIT: Bien que marqué comme accepté, cette réponse a été écrite pour une première version de Ionic. Les chances sont, vous voudrez une des réponses ci-dessous pour les versions les plus récentes.

Classe item-text-wrap devrait vous aider, comme ceci:

<ion-item class="item item-text-wrap">
  bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>
39
carpiediem

Pour les utilisateurs de Ionic 2, vous pouvez utiliser l'attribut text-wrap comme suit:

<ion-item text-wrap>
  Multiline text that should wrap when it is too long to fit on one line in the item.
</ion-item>

Vous pouvez également voir Documentation sur les attributs de l’utilitaire pour les attributs pouvant être ajoutés à ion-item pour transformer le texte.

56
Amit Gupta

Vous devez écraser le CSS par défaut ajouté au <ion-item> spécifique. Par exemple, changez:

<ion-item class="item">
    bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>

À:

<ion-item class="item" style="white-space: normal;">
    bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>
3
Mark Veenstra

Dans Ionic v4 vous pouvez associer l'attribut text-wrap au composant ion-label à l'intérieur d'un ion-item. Par exemple: 

<ion-item>
  <ion-label text-wrap>
    Multiline text that should wrap when it is too long to fit on one line in the item.
  </ion-label>
</ion-item>
2
Phil