Компонент Ярлык : Метка 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>

Label