Компонент Ярлык : Метка Label

Добавьте в контент привлекающую подсказку. Используйте ярлычёк в тексте для отображения примечаний. Дополнительные стили для изменения внешнего вида меток. Примеры. Использование.

Метки UIkit - отличный способ выделить фрагмент 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>