如何在离子列表上放置正确的细分

Question

我正在使用Ionic 4，我想在列表的右侧添加字幕。

我希望右侧看起来与左侧相同。我有一个词1 Slice。

这是我的代码。

<ion-header>
<ion-toolbar>
  <ion-title>Foods</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="primary" (click)="showModal()">
      <ion-icon slot="icon-only" name="add"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

    

<ion-list>
  <ion-item>
    <ion-label>
      <h2>Pizza</h2>
      <p>1 Slice</p>
    </ion-label>
    <ion-text>366</ion-text>
  </ion-item>
</ion-list>

Answer 1

尝试slot =“ start”和slot =“ end”

 <ion-list>
      <ion-item>
        <ion-label slot="start">
          <h2>Pizza</h2>
          <p>1 Slice</p>
        </ion-label>
        <ion-label slot="end>
          <h2>Pizza</h2>
          <p>1 Slice</p>
        </ion-label>
      </ion-item>
    </ion-list>