Элементы

Разделитель

Линия между блоками: горизонтальная, вертикальная, с подписью посередине.

Примеры

<p>Расписание встреч на неделю</p>
<hr class="separator">
<p>Архив прошедших встреч</p>
<hr class="separator separator--thin">
<p>Служебные записи</p>

<div class="separator separator--label" role="separator"><span class="separator__label">или</span></div>

<div class="btns">
  <span>Аптайм 99,98%</span>
  <span class="separator separator--vertical" role="separator" aria-orientation="vertical"></span>
  <span>Участников 148</span>
  <span class="separator separator--vertical" role="separator" aria-orientation="vertical"></span>
  <span>Релиз 2.14</span>
</div>

Установка

bukatchuk-ui add separator

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Разделитель. Параметры: label (подпись посередине), vertical=true, variant (thin | thick | safety | dashed).
{%- endcomment -%}
{%- assign cls = 'separator' -%}
{%- if include.variant %}{% assign cls = cls | append: ' separator--' | append: include.variant %}{% endif -%}
{%- if include.vertical %}{% assign cls = cls | append: ' separator--vertical' %}{% endif -%}
{%- if include.label -%}
<div class="{{ cls }} separator--label" role="separator"{% if include.vertical %} aria-orientation="vertical"{% endif %}><span class="separator__label">{{ include.label }}</span></div>
{%- elsif include.vertical -%}
<span class="{{ cls }}" role="separator" aria-orientation="vertical"></span>
{%- else -%}
<hr class="{{ cls }}">
{%- endif -%}

Макрос для Jinja

{#- Разделитель. label — подпись посередине; vertical — вертикальный; variant: thin | thick | safety | dashed. -#}
{% macro separator(label=None, vertical=False, variant=None) -%}
{%- set cls = 'separator' ~ (' separator--' ~ variant if variant else '') ~ (' separator--vertical' if vertical else '') -%}
{%- if label -%}
<div class="{{ cls }} separator--label" role="separator"{% if vertical %} aria-orientation="vertical"{% endif %}><span class="separator__label">{{ label }}</span></div>
{%- elif vertical -%}
<span class="{{ cls }}" role="separator" aria-orientation="vertical"></span>
{%- else -%}
<hr class="{{ cls }}">
{%- endif -%}
{%- endmacro %}