Элементы

Шаги

Шаги процесса или мастера: номер, название и состояние (пройден, текущий, впереди); горизонтально и столбиком.

Примеры

<ol class="steps" aria-label="Подключение комнаты">
  <li class="steps__item is-done">
    <span class="steps__num" aria-hidden="true">✓</span>
    <span class="steps__body"><span class="steps__title">Создание<span class="visually-hidden">, пройден</span></span><span class="steps__desc">Название и адрес</span></span>
  </li>
  <li class="steps__item is-current" aria-current="step">
    <span class="steps__num" aria-hidden="true">2</span>
    <span class="steps__body"><span class="steps__title">Доступ<span class="visually-hidden">, текущий шаг</span></span><span class="steps__desc">Пароль и организаторы</span></span>
  </li>
  <li class="steps__item">
    <span class="steps__num" aria-hidden="true">3</span>
    <span class="steps__body"><span class="steps__title">Приглашения<span class="visually-hidden">, впереди</span></span><span class="steps__desc">Ссылка и e-mail</span></span>
  </li>
</ol>

<ol class="steps steps--vertical" aria-label="Разбор инцидента">
  <li class="steps__item is-done">
    <span class="steps__num" aria-hidden="true">✓</span>
    <span class="steps__body"><span class="steps__title">Хронология<span class="visually-hidden">, пройден</span></span><span class="steps__desc">Что и когда произошло, по журналам и графикам.</span></span>
  </li>
  <li class="steps__item is-done">
    <span class="steps__num" aria-hidden="true">✓</span>
    <span class="steps__body"><span class="steps__title">Причины<span class="visually-hidden">, пройден</span></span><span class="steps__desc">Технические и организационные.</span></span>
  </li>
  <li class="steps__item is-current" aria-current="step">
    <span class="steps__num" aria-hidden="true">3</span>
    <span class="steps__body"><span class="steps__title">Действия<span class="visually-hidden">, текущий шаг</span></span><span class="steps__desc">Что меняем, кто отвечает, к какому сроку.</span></span>
  </li>
  <li class="steps__item">
    <span class="steps__num" aria-hidden="true">4</span>
    <span class="steps__body"><span class="steps__title">Публикация<span class="visually-hidden">, впереди</span></span><span class="steps__desc">Отчёт для команды и клиентов.</span></span>
  </li>
</ol>

Установка

bukatchuk-ui add steps

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Шаги процесса. Параметры: items — список объектов (title, desc); current — номер текущего шага с единицы
  (меньшие пройдены, большие впереди); vertical=true — столбиком; label — подпись списка.
{%- endcomment -%}
{%- assign current = include.current | default: 1 -%}
<ol class="steps{% if include.vertical %} steps--vertical{% endif %}" aria-label="{{ include.label | default: 'Шаги' }}">
  {%- for it in include.items %}
  {%- assign n = forloop.index %}
  <li class="steps__item{% if n < current %} is-done{% elsif n == current %} is-current{% endif %}"{% if n == current %} aria-current="step"{% endif %}>
    <span class="steps__num" aria-hidden="true">{% if n < current %}✓{% else %}{{ n }}{% endif %}</span>
    <span class="steps__body"><span class="steps__title">{{ it.title }}<span class="visually-hidden">{% if n < current %}, пройден{% elsif n == current %}, текущий шаг{% else %}, впереди{% endif %}</span></span>{% if it.desc %}<span class="steps__desc">{{ it.desc }}</span>{% endif %}</span>
  </li>
  {%- endfor %}
</ol>

Макрос для Jinja

{#- Шаги процесса. items — список (title, desc); current — номер текущего шага с единицы
    (меньшие пройдены, большие впереди); vertical — столбиком. -#}
{% macro steps(items, current=1, vertical=False, label='Шаги') -%}
<ol class="steps{% if vertical %} steps--vertical{% endif %}" aria-label="{{ label }}">
  {%- for it in items %}
  {%- set n = loop.index %}
  <li class="steps__item{% if n < current %} is-done{% elif n == current %} is-current{% endif %}"{% if n == current %} aria-current="step"{% endif %}>
    <span class="steps__num" aria-hidden="true">{{ '✓' if n < current else n }}</span>
    <span class="steps__body"><span class="steps__title">{{ it.title }}<span class="visually-hidden">{{ ', пройден' if n < current else (', текущий шаг' if n == current else ', впереди') }}</span></span>{% if it.desc %}<span class="steps__desc">{{ it.desc }}</span>{% endif %}</span>
  </li>
  {%- endfor %}
</ol>
{%- endmacro %}