web-dev-qa-db-ja.com

Ionic：複数行にイオンアイテムを表示する方法は？

状況：

Ionicを使用してアプリを構築しています。

一部の人々に関する情報のリストを表示する必要があります。それを取得するには、 イオンリスト<ion-list>と<ion-item>を使用しています。

唯一の問題は、各<ion-item>が1行にとどまるように思われることです。これにより、図に示すように、含まれている余分なテキストがカットされます。

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：

これが状況を再現するプランカーです。ブラウザまたは内部ウィンドウのサイズを変更してみて、イオンアイテムが余分なコンテンツをどのように切り取るかを確認できます。

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

質問：

<ion-item>要素の追加コンテンツを表示するにはどうすればよいですか？
コンテンツを複数行で表示できますか？

javascriptandroidcssangularjsionic-framework
22
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>
41
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に追加できる属性については、 tility Attributes Documentation も参照できます。

60
Amit Gupta

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

特定の<ion-item>に追加されたデフォルトのCSSを上書きする必要があります。たとえば、次のように変更します。

<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

これらのソリューションは、2行ある場合にのみ機能します...多くの行があり、それらすべてを表示したい場合は、これをコンポーネントのscssに追加します。

.item-block {
    height: auto;
}

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