Компонент Ярлык : Метка
Добавьте в контент привлекающую подсказку. Используйте ярлычёк в тексте для отображения примечаний. Дополнительные стили для изменения внешнего вида меток. Примеры. Использование.
Метки UIkit - отличный способ выделить фрагмент HTML-заголовка или какой-либо элемент контента. Ярлычки могут использоваться для добавления дополнительной информации к любому содержимому.
Label: Применение
Чтобы создать прямоугольную метку, просто добавьте к элементу <span> класс .uk-label.
<span class="uk-label"></span>
Примеры
<span class="uk-label">По умолчанию</span>Новость! Компонент Label в UIkit 3 добавляет информативную подсказку.
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана по имени Lorem ipsum.
<h3 class="uk-h2">
<span class="uk-label">Новость!</span> Компонент Label в UIkit 3 добавляет информативную подсказку.
</h3>
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана по имени Lorem ipsum.</p>Примечание Все домыслы их были сосредоточены в это время в самих себе: они думали, каков-то будет новый фреймворк-губернатор, как возьмется за дело и как подскажет им. Вуаля!
<p>
<span class="uk-label">Примечание</span>
Все домыслы их были сосредоточены в это время в самих себе: они думали, каков-то будет новый фреймворк-губернатор, как возьмется за дело и как подскажет им. Вуаля!
</p>Модификатор «Стиль»
Добавьте один из классов дополнительных стилей для изменения внешнего вида метки.
| Класс | Описание |
|---|---|
.uk-label-success |
Успешно. Положительно. |
.uk-label-warning |
Обозначает предупреждение. |
.uk-label-danger |
Указывает на ошибку или что-то важное. |
<span class="uk-label uk-label-success"></span>
<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>