文本（标签）未占用离子列表中的所有可用 space

Question

我是 Ionic 和移动开发的新手。我正在使用 ionic 列表，如何使文本全屏可用（请参阅图片中的最后收到）并且可以在 <h4> 和 <p> 周围使用 <ion-label> 吗？

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

我也搞砸了其他事情，比如删除不需要的插槽并将属性转换为 appropriate utility classes，这现在被认为是最佳实践（因为他们引入了 react 和 vue 而不是支持这些属性）。

文本（标签）未占用离子列表中的所有可用 space

Text (label) is not taking all available space in ionic list

html

css

android-listview

ionic-framework

ionic4