如何降低離子段按鈕的高度

Question

我嘗試將padding和margin設置為0px ，但高度仍然沒有降低。

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

我無法在文檔中找到任何我無法調整的屬性。

Answer 1

你可以這樣設置高度..

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

Answer 2

需要降低高度和最小高度。 它應該工作。

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

Answer 3

這對我來說很好用：（你必須定義一個離子段按鈕的高度）

  <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>

Answer 4

我在 css 中確實喜歡這個

ion-segment{
  height:30px;
}

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

Answer 5

<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;
}

這對我有用，還要檢查它是否需要一些高度，以便我們可以相應地進行管理..

Answer 6

單獨設置最小高度會導致按鈕中的文本被裁剪。 以下是如何調整按鈕的高度並使文本下降到新的中心：

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