ionic4 делает сегмент на IOS, чтобы они выглядели как на Android с CSS

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

Это легко сделать, установив mod e как 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 2

С ionic 4 было добавлено ion-label, поэтому лучший подход - настроить его так:

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

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

, это будет хорошо работать!

Answer 3

РЕДАКТИРОВАТЬ: решение Ionic 4

Установите высоту сегмента в соответствии с высотой заголовка

ion-segment{
    height: 44px;
}

Стиль кнопки сегмента с цветом для неактивного сегмента.
Удаление границы и границы-radius.

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

Исходная кнопка сегмента:

После оформления: