LabelTag
Используйте тег <LabelTag>, чтобы разместить на виджете текстовую метку.
Доступные атрибуты:
| Атрибут | Тип | Обязательно | Описание |
|---|---|---|---|
| icon | Html | Нет | Укажите изображение, которое должно быть размещено на лейбле, в формате svg или img. |
| text | String | Нет | Укажите текст лейбла. |
| tagClass | String | Нет | Укажите название дополнительного класса CSS для лейбла. |
| iconClass | String | Нет | Укажите название дополнительного класса CSS для изображения. |
| textClass | String | Нет | Укажите название дополнительного класса CSS для текста. |
| color | String | Нет | Укажите цвет лейбла. Список возможных цветов доступен в таблице ниже. |
| dataTest | String | Нет | Дополнительный атрибут для тестирования. |
Пример:
LabelTag
<LabelTag
text='Label'
color='orange'
></LabelTag>
Шаблон из примера добавляет следующий элемент на страницу:
Цвета, доступные для лейбла
| Значение атрибута color | HEX-код | Пример |
|---|---|---|
| dark | #2e3238 | |
| gray | #d5d8dd | |
| aqua | #2ed6e5 | |
| purple | #6800b2 | |
| orange | #ff9f19 | |
| yellow | #ffd499 | |
| blue | #005999 | |
| green | #00662b | |
| red | #b21f00 | |
| default | #d5d8dd | |
| aquaNeutral | #b1edf2 | |
| blueNeutral | #99d5ff | |
| greenNeutral | #b1f2cc | |
| redNeutral | #ffaa99 | |
| purpleNeutral | #dfb2ff | |
| light | #f1f2f3 | |
| orangeDark | #e58600 | |
| orangeDeep | #f79000 | |
| orangePastel | #ffbf66 | |
| orangeLight | #ffefd9 | |
| aquaDark | #14bdcc | |
| aquaDeep | #00c7d9 | |
| aquaPastel | #77e3ed | |
| aquaLight | #d9f7fa | |
| blueDeep | #0068b2 | |
| blueBright | #0078cf | |
| bluePastel | #66bfff | |
| blueLight | #e5f4ff | |
| greenDeep | #00732f | |
| greenBright | #008738 | |
| greenPastel | #80e8ab | |
| greenLight | #d9fae7 | |
| redDeep | #c42100 | |
| redBright | #d62502 | |
| redPastel | #ff7f66 | |
| redLight | #ffe9e5 | |
| purpleDeep | #7700cc | |
| purpleBright | #8600e5 | |
| purplePastel | #ca80ff | |
| purpleLight | #f4e5ff |