it-swarm.com.ru

Ionic: Как отобразить ионный элемент на нескольких строках?

СИТУАЦИЯ:

Я использую Ionic для создания приложения.

Мне нужно отобразить список информации о некоторых людях . Чтобы получить это, я использую ионный список<ion-list> вместе с <ion-item>, поскольку макет, который он предлагает, это именно то, что мне нужно.

Единственная проблема состоит в том, что каждый <ion-item>, кажется, вынужден оставаться на одной строке, обрезая дополнительный текст, который он содержит, как показано на рисунке:

enter image description here

КОД:

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

Вот поршень, который воссоздает ситуацию. Вы можете попытаться изменить размер браузера или внутренних окон, и вы увидите, как ion-item вырезал дополнительный контент.

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

ВОПРОС:

Как я могу отобразить дополнительный контент в элементе <ion-item>
Можно ли отображать контент в несколько строк?

19
FrancescoMussi

Правка: Хотя отмечен как принятый, этот ответ был написан для ранней версии Ionic. Скорее всего, вам понадобится один из ответов ниже для новых версий.

Класс item-text-wrap должен помочь вам, вот так:

<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

Для пользователей Ionic 2 вы можете использовать атрибут text-wrap как:

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

Вы также можете просмотреть документацию по атрибутам утилит для атрибутов, которые можно добавить в ion-item для преобразования текста.

56
Amit Gupta

Вы должны перезаписать CSS по умолчанию, добавленный к определенному <ion-item>, например, change:

<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

В Ionic v4 вы можете прикрепить атрибут text-wrap к компоненту ion-label внутри ion-item. Например: 

<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