离子2:使离子列表项更小

时间:2016-08-09 15:21:25

标签: css ionic-framework ionic2

有一个类似的问题here,但它与离子1有关,其中ion-item仍有ion-content。在离子-2中没有ionic-content。我已经尝试更改实际ion-item和类item-inner的高度/填充/边距,并且似乎无法获得离子项的统一“瘦身”。

问题:如何使离子列表中的离子列表更小/更小/离子2中的离子列表更高? PS。这是使用离子2 beta 10

2 个答案:

答案 0 :(得分:7)

我发现这个问题的主要问题是app.ios.css文件本身离子化,分配给.item元素的ion-item类获得了min-height分配它的4.4 rem。我不确定这个价值来自哪里,或者为什么它是4.4。因此,在与列表有关的.scss文件中,我刚刚添加:

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

这使得我对边距(我最终将边距分别更改为0 8px 0 0)的内部元素所做的任何更改实际上改变了列表项的高度,因为它们没有碰到一个最小高度设定。请参阅其他答案,了解更改保证金的位置。

在不更改列表项的最小高度的情况下,对内部元素边距的任何更改都没有做任何事情(至少对我而言)。

答案 1 :(得分:4)

更改<ion-label>上的上下填充。默认为:

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