ionic4 使 ios 上的片段看起来像它们在带有 css 的 android 上的样子

Question

我正在尝试使 ios 上的段看起来与它们在 android 上的外观相同。参考https://beta.ionicframework.com/docs/api/segment

我尝试使用 css 属性，例如

segment-button-checked {
    --background-checked: transparent !important;
    --color-checked: white !important;
    border-bottom: 1 px solid white
}

ion-segment-button {
    --color: #8CA2A5;
    --border-color: transparent !important
}

选定的按钮属性不会以这种方式工作。并且整体视觉上看起来不像在 android 上看起来那么好看

Answer 1

编辑：离子 4 解决方案

设置段高度以匹配标题高度

ion-segment{
    height: 44px;
}

为非活动段设置带有颜色的样式段按钮。
删除边框和边框半径。

ion-segment-button{
    font-size: 16px;
    color: var(--ion-color-medium);
    border: 0px;
    border-radius: 0px;
}

.segment-button-checked类用于设置段的活动状态。

.segment-button-checked{
    background: #FFF;
    color: var(--ion-color-primary);
    border-bottom: 3px solid var(--ion-color-primary);
}

原始段按钮：

造型后：

Answer 2

这可以通过将mode设置为md

<ion-segment  mode="md">
  <ion-segment-button value="friends">
    <ion-label>Friends</ion-label>
  </ion-segment-button>
  <ion-segment-button value="enemies">
    <ion-label>Enemies</ion-label>
  </ion-segment-button>
</ion-segment>