Ionic 如何降低离子段按钮的高度

ie3xauqp  于 2023-01-28  发布在  Ionic
关注(0)|答案(6)|浏览(167)

我尝试将paddingmargin设置为0px,但高度仍然没有降低。

ion-segment-button {
  --padding-bottom: 0px;
  --padding-top: 0px;
  --margin-bottom: 0px;
  --margin-top: 0px;
}

我在文档中找不到任何我不能调整的属性。

sqxo8psd

sqxo8psd1#

你可以这样设置高度。

ion-segment-button{
    min-height: 10px;
}
e37o9pze

e37o9pze2#

需要降低高度和最小高度。它应该工作。

ion-segment-button {
  height: 30px;
  min-height: 30px;
}
pxiryf3j

pxiryf3j3#

<ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" value="0">
    <ion-segment-button value="0">                                             
        Active                                                                 
    </ion-segment-button>                                                      
    <ion-segment-button value="1">                                             
        Expire                                                                 
    </ion-segment-button>                                                      
</ion-segment>

CSS:

ion-segment-button {
    min-height: 32px;
}

这对我很有效。另外,检查它是否需要一些高度,以便我们可以相应地管理。

ssgvzors

ssgvzors4#

这对我来说很好:(您必须定义离子段按钮的高度)

<ion-segment [(ngModel)]="relationship" color="primary" >
    <ion-segment-button value="friends" style="height: 30px; font-size: 8px">
      Friends
    </ion-segment-button>
    <ion-segment-button value="enemies" style="height: 30px; font-size: 8px">
      Enemies
    </ion-segment-button>
  </ion-segment>
e37o9pze

e37o9pze5#

我在css里确实喜欢这个

ion-segment{
  height:30px;
}

ion-segment-button{
   min-height:30px;
}
zc0qhyus

zc0qhyus6#

单独设置最小高度会导致按钮中的文本被裁剪。以下是如何调整按钮高度并使文本向下进入新的中心:

ion-segment-button{
    height: 30px;
    min-height: 30px;
}
ion-segment-button ion-label{
    margin:auto; 
}

相关问题