如何在 ionic 4 中为 ion-item 的内容设置块样式？

Question

我正在看 Ionic2 的教程，但我正在研究有点不同的 Ionic4，我想制作这样的页面：

但我的页面是这样创建的：

这是我在 Ionic4 中的 Html 代码：

<ion-content padding>
 <h3 text-center>Select your favorite Qoute</h3>
  <ion-list *ngFor="let quoteGroup of qouteCollection">
    <ion-item detail>
      <ion-icon [name]="quoteGroup.icon"></ion-icon>
      <h3>{{ quoteGroup.category }}</h3>
      <p>{{ quoteGroup.quotes.length }} Qoutes</p>
    </ion-item>
  </ion-list>
</ion-content>

Answer 1

把ion-item的内容用ion-label包裹起来。这应该可以做到。

<ion-content padding>
 <h3 text-center>Select your favorite Qoute</h3>
  <ion-list *ngFor="let quoteGroup of qouteCollection">
    <ion-item detail>
      <ion-label>
        <ion-icon [name]="quoteGroup.icon"></ion-icon>
        <h3>{{ quoteGroup.category }}</h3>
        <p>{{ quoteGroup.quotes.length }} Qoutes</p>
      </ion-label>    
    </ion-item>
  </ion-list>
</ion-content>

如何在 ionic 4 中为 ion-item 的内容设置块样式？

How to set block style for content of ion-item in ionic 4?

html

css

styles

ionic-framework

ionic4