Как я могу настроить метку выбора иона в 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

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