Элементы

Метка

Маленькая метка состояния: в порядке, ошибка, отключено.

badge с версии 0.1.0

Примеры

Состояния

Черновик Активна Заблокирован Отключена

<p>
  <span class="badge">Черновик</span>
  <span class="badge badge--ok">Активна</span>
  <span class="badge badge--bad">Заблокирован</span>
  <span class="badge badge--off">Отключена</span>
</p>

Установка

bukatchuk-ui add badge

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

Файл	Назначение
`badge.css`	стили
`example.html`	образец разметки, в проект не копируется
`badge.jekyll.html`	вставка для Jekyll
`badge.jinja.html`	вставка для Jinja

Варианты

Класс	Назначение
`badge--ok`
`badge--bad`
`badge--off`

Вставка для Jekyll

{%- comment -%} Метка. Параметры: text, kind (ok | bad | off). {%- endcomment -%}
<span class="badge{% if include.kind %} badge--{{ include.kind }}{% endif %}">{{ include.text }}</span>

Макрос для Jinja

{#- Метка. kind: ok | bad | off; без kind — нейтральная. -#}
{% macro badge(text, kind=None) -%}
<span class="badge{% if kind %} badge--{{ kind }}{% endif %}">{{ text }}</span>
{%- endmacro %}