webentwicklung-frage-antwort-db.com.de

Ionic: Wie zeige ich ein Element auf mehreren Zeilen an?

DIE SITUATION:

Ich verwende Ionic, um eine App zu erstellen.

Ich muss eine Liste mit Informationen zu einigen Personen anzeigen ... Um dies zu erreichen, verwende ich die ionic list<ion-list> zusammen mit <ion-item>, da das Layout genau das ist, was ich brauche.

Das einzige Problem ist, dass jeder <ion-item> gezwungen ist, in einer einzelnen Zeile zu bleiben und den zusätzlichen Text, der darin enthalten ist, auszuschneiden, wie im Bild gezeigt:

enter image description here

DER 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:

Hier ist ein Plunker, der die Situation nachstellt. Sie können versuchen, die Größe des Browsers oder der internen Fenster zu ändern, und Sie können sehen, wie Ionenelemente den zusätzlichen Inhalt ausschneiden.

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

DIE FRAGE:

Wie kann ich den zusätzlichen Inhalt in einem <ion-item>-Element anzeigen? 
Kann der Inhalt in mehreren Zeilen angezeigt werden?

19
FrancescoMussi

BEARBEITEN: Obwohl als akzeptiert markiert, wurde diese Antwort für eine frühe Version von Ionic geschrieben. Wahrscheinlich werden Sie für die neueren Versionen eine der folgenden Antworten benötigen.

Klasse item-text-wrap sollte dir helfen, wie folgt:

<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

Für Ionic 2-Benutzer können Sie das text-wrap-Attribut wie folgt verwenden:

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

Sie können auch die Dokumentation der Utility-Attribute sehen für Attribute, die zu ion-item hinzugefügt werden können, um den Text zu transformieren.

56
Amit Gupta

Sie sollten das Standard-CSS, das dem jeweiligen <ion-item> hinzugefügt wurde, überschreiben. Ändern Sie beispielsweise Folgendes:

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

Zu:

<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

In Ionic v4 können Sie das text-wrap-Attribut der ion-label-Komponente innerhalb eines ion-item hinzufügen. Zum Beispiel: 

<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

Diese Lösungen funktionieren nur, wenn Sie 2 Zeilen haben ... Wenn Sie viele Zeilen haben und diese alle anzeigen möchten, fügen Sie dies zum scss der Komponente hinzu:

.item-block {
    height: auto;
}

.item-ios.item-block .item-inner {
    height: auto;
}
0
Ari Waisberg