Текст (метка) не занимает все доступное место в ионном списке

Question

Я новичок в области ионной и мобильной разработки. Я использую ионный список, как сделать текст полностью доступным на экране (см. «Последний полученный на картинке»), и можно ли использовать <ion-label> вокруг <h4> и <p>?

<ion-list>
<ion-item *ngFor ="let connection of connections">
  <ion-avatar slot="start">
    <img [src]="connection?.picture">
  </ion-avatar>
<ion-label text-wrap>
  <h4>{{ connection?.name}}</h4>
  <p text-wrap> Last received:  {{ connection?.locationDesc }}</p>
</ion-label>

<ion-label slot="end" text-right>
  <p item-end> 2 Messages </p>
  <ion-button clear slot="end">View</ion-button>
</ion-label>          
</ion-item>

Answer 1

Похоже, что это занимает немного времени, но на самом деле он делит 50 50 с двумя метками, которые вы вставили для использования в качестве столбцов. Похоже, что он занимает меньше половины из-за переноса слов.

Это потому, что ярлыки оформлены как гибкие элементы с этими правилами.

Мне удалось получить это так:

Используя этот код:

  <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <img src="/assets/matthew.jpg">
      </ion-avatar>
      <ion-label  class="ion-text-wrap">
        <h4>Some name</h4>
        <p> Last received: All plugins have two components - the native code (Cordova) and the
          JavaScript code. Cordova plugins are also wrapped in a Promise or Observable in order to provide a common
          plugin interface. Below are various framework options using the Camera plugin as an example. </p>
      </ion-label>
      <ion-note class="ion-text-end">
        <p> 2 Messages </p>
        <ion-button clear>View</ion-button>
      </ion-note>
    </ion-item>
  </ion-list>

В основном я поменял последний ion-label на ion-note.

Я также возился с другими вещами, такими как удаление ненужных слотов и преобразование атрибутов в соответствующие служебные классы , что в настоящее время считается наилучшей практикой (так как они ввели реагирование и vueкоторые не поддерживают эти атрибуты).