이온: 이온 아이템을 여러 선에 표시하는 방법?

이온: 이온 아이템을 여러 선에 표시하는 방법?

상황:

저는 앱을 만들기 위해 Ionic을 사용하고 있습니다.

저는 몇몇 사람들에 대한 정보 목록을 보여주어야 합니다.그것을 얻기 위해 나는 이온 리스트를 사용하고 있습니다. <ion-list>와 함께<ion-item>그것이 제공하는 레이아웃이 바로 제가 필요로 하는 것이기 때문입니다.

유일한 문제는 각각이<ion-item>사진과 같이 한 줄에 머물러야 하는 것처럼 보입니다.

코드:

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

플렁커:

여기 상황을 재현하는 플렁커가 있습니다.브라우저 또는 내부 창 크기를 조정할 수 있으며 이온 항목이 추가 콘텐츠를 잘라내는 방법을 확인할 수 있습니다.

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

질문:

에 추가 내용을 표시하려면 어떻게 해야 합니까?<ion-item>요소?
내용을 여러 줄로 표시할 수 있습니까?

Ionic2 사용자의 경우 사용할 수 있습니다.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텍스트를 변환합니다.

편집: 승인된 것으로 표시되어 있지만, 이 답변은 이오닉의 초기 버전을 위해 작성되었습니다.아마 새로운 버전에 대한 답은 아래와 같이 필요할 것입니다.

클래스 항목-텍스트 랩은 다음과 같이 도움이 됩니다.

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

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>

Ionic v5용 EDIT: Ionic CSS 특성은 더 이상 사용되지 않으며 v5에서 작동하지 않습니다. 속성 태그 교체(예:<ion-label text-wrap>이온성 클래스(예:<ion-label class="ion-text-wrap">). 예를 들어,

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

이것은 v4에도 적용될 것입니다.

특정에 추가된 기본 CSS를 덮어써야 합니다.<ion-item>, 예를 들어, 변경:

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

그 해결책들은 두 줄이 있을 때만 작동합니다.줄이 여러 개 있는데 이를 모두 표시하려면 다음을 구성 요소의 sscs에 추가합니다.

.item-block {
    height: auto;
}

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

언급URL : https://stackoverflow.com/questions/30937606/ionic-how-to-display-ion-item-on-multiple-lines