Элементы

Вкладки-ссылки

Вкладки разделов страницы в виде ссылок; отдельный акцентный цвет для служебных разделов.

Примеры

<nav class="tabs" aria-label="Разделы кабинета">
  <a class="tabs__item is-active" href="#" aria-current="page">Встречи</a>
  <a class="tabs__item" href="#">Контакты</a>
  <a class="tabs__item" href="#">Профиль</a>
  <a class="tabs__item" href="#">Безопасность</a>
  <a class="tabs__item tabs__item--accent" href="#">Пользователи</a>
  <a class="tabs__item tabs__item--accent" href="#">Журнал</a>
</nav>

Установка

bukatchuk-ui add tabs

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Вкладки-ссылки. Параметры: items — список с полями text, href, key, accent; active — key текущей; label.
{%- endcomment -%}
<nav class="tabs" aria-label="{{ include.label | default: 'Разделы' }}">
  {%- for t in include.items %}
  <a class="tabs__item{% if t.accent %} tabs__item--accent{% endif %}{% if t.key == include.active %} is-active{% endif %}" href="{{ t.href }}"{% if t.key == include.active %} aria-current="page"{% endif %}>{{ t.text }}</a>
  {%- endfor %}
</nav>

Макрос для Jinja

{#- Вкладки-ссылки. items — список с полями text, href, key и accent (служебный раздел); active — key текущего. -#}
{% macro tabs(items, active=None, label='Разделы') -%}
<nav class="tabs" aria-label="{{ label }}">
  {%- for t in items %}
  <a class="tabs__item{% if t.accent %} tabs__item--accent{% endif %}{% if t.key == active %} is-active{% endif %}" href="{{ t.href }}"{% if t.key == active %} aria-current="page"{% endif %}>{{ t.text }}</a>
  {%- endfor %}
</nav>
{%- endmacro %}