Метки

badge
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно создать компонент меток.

Примеры

Метки изменяют размер для подстройки к размеру непосредственного родительского элемента, это достигается использованием относительного размера шрифта и единиц em.

Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый 
<h1>
    Пример заголовка <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse">Новый</span>
</h1>
<h1>
    Пример заголовка <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse">Новый</span>
</h2>
<h3>
    Пример заголовка <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse">Новый</span>
</h>
<h4>
    Пример заголовка <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse">Новый</span>
</h4>
<h5>
    Пример заголовка <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse">Новый</span>
</h5>
<h6>
    Пример заголовка <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse">Новый</span>
</h6>

Метки можно использовать как часть ссылки или кнопок, в качестве счетчика.

<button type="button" class="btn btn-primary">
    Уведомления <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse">4</span>
</button>

Заметьте, что в зависимости от вида использования «значки» могут создать проблемы для «экранных читалок» и подобных вспомогательных технологий. Обратите внимание, что в зависимости от того, как значки используются, они могут вводить в заблуждение пользователей программ экранного доступа и аналогичных вспомогательных технологий. В то же время дизайн значков, согласно их назначению, даёт визуальную подсказку, таким пользователям просто будет показано содержимое значка. В зависимости от ситуации эти «значки» могут выглядеть для вспомогательных технологий («читалки» и тд) как случайные слова или цифры в конце предложения, ссылки или кнопки.

Лишь пока контекст ясен (как с примером «Уведомления», где понятно, что «4» - это число уведомлений), можно включать дополнительный контекст с помощью скрытой части дополнительного текста. 

<button type="button" class="btn btn-primary relative">
    Профиль <span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center absolute bg-blue -top-a9 radius-full">+99</span>
</button>

Цвет

Добавьте любой из нижеприведенных модификаторов для изменения внешнего вида «значка».

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный 
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-primary color-on-surface-inverse m-right-1/3">Главный</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-secondary color-on-surface-inverse m-right-1/3">Вторичный</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-success m-right-1/3">Успех</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-danger m-right-1/3">Опасность</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-warning m-right-1/3">Предупреждение</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-primary-container m-right-1/3">Инфо</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-surface-0 theme-light m-right-1/3">Светлый</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center bg-surface-0 theme-dark color-on-surface">Темный</span>

Скругленные метки

Используйте модификатор .radius-full для придания меткам большего скругления углов

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный 
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-primary color-on-surface-inverse m-right-1/3">Главный</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-secondary color-on-surface-inverse m-right-1/3">Вторичный</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-success m-right-1/3">Успех</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-danger m-right-1/3">Опасность</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-warning m-right-1/3">Предупреждение</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-primary-container m-right-1/3">Инфо</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-surface-0 theme-light">Светлый</span>
<span class="sf-badge p-1/3 inline-block radius-1/3 wrap-none t-baseline string-none center radius-full bg-surface-0 theme-dark color-on-surface">Темный</span>

Адаптивность

Для установки адаптивности меток, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью