Компонент Ярлык : Label : Метка
Добавьте в контент привлекающую подсказку. Используйте ярлычёк в тексте для отображения примечаний.
Метки UIkit 3 - отличный способ выделить фрагмент HTML-заголовка или какой-либо элемент контента. Ярлычки могут использоваться для добавления дополнительной информации к любому содержимому.
Использование
Чтобы создать прямоугольную метку, просто добавьте к элементу <span> класс .uk-label.
<span class="uk-label"></span>
Примеры
Новость! Компонент Label в UIkit 3 добавляет информативную подсказку.
-
<h3 class="uk-h2"><span class="uk-label">Новость!</span> Компонент Label в UIkit 3 добавляет информативную подсказку.</h3> -
Примечание Все домыслы их были сосредоточены в это время в самих себе: они думали, каков-то будет новый фреймворк-губернатор, как возьмется за дело и как подскажет им. Вуаля!
-
<p><span class="uk-label">Примечание</span> Все домыслы их были сосредоточены в это время в самих себе: они думали, каков-то будет новый фреймворк-губернатор, как возьмется за дело и как подскажет им. Вуаля!</p> -
Модификатор «Стиль»
Добавьте один из классов дополнительных стилей для изменения внешнего вида метки.
| Класс | Описание |
|---|---|
.uk-label-success |
Успешно. Положительно. |
.uk-label-warning |
Обозначает предупреждение. |
.uk-label-danger |
Указывает на ошибку или что-то важное. |
<span class="uk-label uk-label-success"></span>
- По умолчанию Success Warning Danger
-
<span class="uk-label">По умолчанию</span> <span class="uk-label uk-label-success">Success</span> <span class="uk-label uk-label-warning">Warning</span> <span class="uk-label uk-label-danger">Danger</span> -
Метка и Карта
Обратите внимание на пример совместного использования метки и компонента Карточка (подробнее).
- Метка
Название карты
Как бы хорошо могла сложиться судьба Серого Волка, если бы он не заговорил в лесу с незнакомой Красной Шапочкой...
-
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m"> <div class="uk-card-badge uk-label">Метка</div> <h3 class="uk-card-title">Название карты</h3> <p>Как бы хорошо могла сложиться судьба Серого Волка, если бы он не заговорил в лесу с незнакомой Красной Шапочкой...</p> </div> -