Ionic 2：使离子列表项目更小

Question

有一个类似的问题，但它与离子 1 有关，其中 ion-item 仍然有 ion-content。在 ionic-2 中没有 ionic-content。我已经尝试更改实际 ion-item 的 height/padding/margin 和 class item-inner 并且似乎无法获得离子的统一 "skinny-ing"项目。

问题：如何使离子列表 skinnier/smaller/not 中的离子项目与离子 2 中的一样高？ Ps。这是使用 ionic 2 beta 10

Answer 1

更改 <ion-label> 上的上下填充。默认是这样的：

ion-label {
  margin: 13px 8px 13px 0;
}

Answer 2

我发现这个问题的主要问题在于 ionic 的原生 app.ios.css 文件，分配给 ion-item 元素的 .item class 得到一个min-height 分配给它的 4.4 rem。我不确定这个值是从哪里来的，也不知道为什么是 4.4。因此，在属于列表的 .scss 文件中，我刚刚添加：

.item {
    min-height: 3rem; /* <- this can be whatever you need */
}

这使得我对内部元素的边距所做的任何更改（我最终将边距分别更改为 0 8px 0 0 ）实际上改变了列表项的高度，因为它们没有凸起针对最小高度设置。请参阅其他答案以了解更改边距的位置。

在不更改列表项的最小高度的情况下，对内部元素边距的任何更改都没有任何作用（至少对我而言）。

Ionic 2：使离子列表项目更小

Ionic 2: make ion-list items smaller

css

ionic-framework

ionic2