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

Answer 3

添加了 ionic 4 ion-label，因此最好的方法是像这样自定义它

.segment-button {
    ion-label {
        color: var(--ion-color-medium);
    }
}

.segment-button-checked {
    ion-label {
        color: var(--ion-color-light) !important;
    }
}

这会很好用！