Как я могу настроить метку выбора иона в Ionic 7? ⇐ CSS

Разбираемся в CSS
Гость
Как я могу настроить метку выбора иона в Ionic 7?

Сообщение Гость »

Я использую Ionic 7 и Angular (material) 14.
Я хочу отображать индикатор обязательного поля (*) в метках полей, где это применимо.
В Ionic 6 я добился этого, добавив тег span в ion-label с классом для стилизации, например:

Код: Выделить всё

Title*

{{title}}


Тогда я мог бы изменить стиль моего индикатора с помощью CSS:

Код: Выделить всё

.required-field-indicator {
color: var(--ion-color-tertiary);
font-weight: bolder;
padding: 2px;
}
Мое поле будет выглядеть следующим образом:
[img]https://i.stack. imgur.com/HzZ7u.png[/img]

Я обновился до Ionic 7 и согласно документации (https://ionicframework.com/docs/api/select) , ионная метка больше не работает с ионным вводом и ионным выбором. Вместо этого следует использовать свойства label и label-placement в компоненте ion-select, как показано в примере:
[img]https:// i.stack.imgur.com/4XAYp.png[/img]

Я соответствующим образом обновил свой код:

Код: Выделить всё


{{title}}


Однако после этого изменения я больше не могу добавлять (если я не добавляю его как символ в свойстве метки) или настраивать символ индикатора обязательного поля.
Изображение

Как добавить мой индикатор и стилизовать его в Ionic 7?
Мне удалось сделать это с помощью CSS в компоненте ионного ввода:

Код: Выделить всё

.required-indicator {
.label-text::after {
content: '*';
transform: translate(-100%, 0);
color: var(--ion-color-tertiary) !important;
font-weight: bolder;
padding: 2px;
}
}


Но это не работает с ion-select. Я также пробовал использовать теневые части и создать директиву для добавления индикатора в DOM, но в любом случае не могу получить доступ к метке. Пожалуйста, помогите!

Подробнее здесь: https://stackoverflow.com/questions/761 ... in-ionic-7

Вернуться в «CSS»