Steps

<sf-steps> показывает этапы процесса, который проходят по порядку: оформление заказа, публикация, мастер настройки. Пройденные этапы отмечены галочкой, текущий выделен. Компонент собирает разметку обычного шага из строки или массива.

Пример

<sf-steps aria-label="Этапы оформления заказа" items="Корзина|Доставка|Оплата|Подтверждение" current="2"></sf-steps>

Применение

Этапы и текущий этап

items перечисляет этапы через |; после :: идут флаги, например Публикация::disabled. Можно передать и массив объектов с полями label и disabled. current — номер текущего этапа, считая с нуля; этапы перед ним отмечаются пройденными.

error-step отмечает этап с ошибкой — номер, тоже с нуля. Такой этап получает иконку ошибки вместо галочки. size — 1/2 или 1, separator-icon меняет разделитель между этапами.

<sf-steps aria-label="Этапы публикации" size="1/2" items="Черновик|Проверка|Публикация::disabled" current="1" error-step="1"></sf-steps>

Переход по этапам

Каждый доступный этап — кнопка. Нажатие делает этап текущим и отправляет всплывающее событие sf-step-change с detail.previous, detail.current (номера с нуля), detail.item — данными этапа и detail.items — всеми этапами. Недоступный этап не нажимается. Если переход назад или вперёд нельзя разрешить без проверки — например, пока форма этапа не заполнена, — отметьте следующие этапы disabled и снимайте флаг по мере прохождения.

goToStep(index) переходит из кода и отправляет то же событие, onStepChange(handler) передаёт обработчику номер нового этапа первым аргументом. Кнопки «Назад» и «Далее» рядом с этапами задаёт страница.

const steps = document.querySelector('sf-steps');
steps.onStepChange((current) => showPanel(current));

document.querySelector('#next').addEventListener('click', () => {
  if (validateCurrentPanel()) steps.goToStep(Number(steps.getAttribute('current')) + 1);
});

Доступность

• Группе этапов нужно доступное имя: aria-label на <sf-steps>. По умолчанию на русской странице она называется «Шаги».
• Каждый этап — нативная кнопка: Tab останавливается на ней, Enter и Space нажимают её. Недоступный этап выпадает из порядка Tab.
• Текущий этап отмечен aria-current="step". К имени пройденного этапа добавляется «Завершено», к имени этапа с ошибкой — «Ошибка». Слова берутся из языка страницы; completed-label и error-label заменяют их.
• Иконки и разделители скрыты от вспомогательных технологий: состояние передаёт имя кнопки, а не цвет.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• size — string, по умолчанию 1, значения: 1, 1/2.
• items — string, по умолчанию [].
• current — number, по умолчанию 0.
• error-step — string, по умолчанию пусто.
• separator-icon — string, по умолчанию chevron_right.
• aria-label — string, по умолчанию пусто. Пусто — текст на языке страницы (по-английски «Steps»).
• completed-label — string, по умолчанию пусто. Пусто — текст на языке страницы (по-английски «Completed»).
• error-label — string, по умолчанию пусто. Пусто — текст на языке страницы (по-английски «Error»).
• root-class — string, по умолчанию пусто.

Методы

• setState(nextState: object) — возвращает object. Записывает каждый ключ как атрибут в kebab-case; массив (items) сериализуется как записи label::disabled, соединённые через |. false, null, undefined или пустое значение удаляет атрибут, true устанавливает его пустым.
• goToStep(index: number|string) — возвращает object. Переводит current на шаг с индексом index, ограничивая его границами списка; ничего не делает для отключённого или текущего шага. Отправляет sf-step-change.
• onStepChange(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик sf-step-change; обработчик вызывается с (current, detail, event). Обработчик, не являющийся функцией, игнорируется.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

• sf-step-change — detail: { component: object, tagName: string, template: string, previous: number, current: number, item: object, items: array }.

Доступность

• Роль: группа (group).
• Доступное имя: обязательно.
• Клавиши: Tab, Enter, Space.
• Фокус: Каждая доступная нативная кнопка шага остаётся доступной с клавиатуры и использует общий индикатор focus-visible. Текущий шаг передаёт aria-current=step; статусы завершения и ошибки включены в доступные имена.

Минимальная разметка

<sf-steps></sf-steps>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/steps
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-steps

См. также

• Breadcrumbs — путь по иерархии страниц.
• Smart-вкладки — панели без обязательного порядка.