ionic4 - Ionic 4 - 如何减少 ionic 列表项的高度

Question

我的侧菜单标题中有一个 ionic 列表，但我无法减少项目的间距。你可以在图片中看到我试图减少的地方:



列表代码是:

<ion-list class="sidemenu-header-list" inset=true lines="none">
  <ion-item color="secondary">
    <h2>{{name}}</h2>
  </ion-item>

  <ion-item color="secondary" class="ion-no-padding" *ngIf="school">
    <ion-label style="font-size: 14px" text-wrap innerHTML={{school}}></ion-label>
    <ion-icon size="small" name="school" slot="start"></ion-icon>
  </ion-item>
  <ion-item color="secondary" class="ion-no-padding"*ngIf="year">
    <ion-label style="font-size: 14px" >{{year | translate}}</ion-label>
    <ion-icon size="small" name="calendar" slot="start"></ion-icon>
  </ion-item>

</ion-list>

我可以看到 input-wrapper 的大小设置为 48px；这就是强制我的物品高度的原因；但看不到我可以在哪里修改它。

Answer 1

尝试将以下几行放入组件 scss 文件中以修改 ion-item 组件的 min-height CSS 变量

ion-item {
    --min-height: 16px;
}

h2 {
   padding: 0px;
   margin : 0px;
 }