ionic-framework - 如何在离子列表上放置正确的子图块

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>

标签： ionic-frameworkionic4

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>