Навигация

Шаги мастера

Последовательность этапов процесса с отметкой, где он сейчас. Состояние несёт слово под подписью — цвета полосы мало.

Компонент

Источникготово
Правилаготово
Проверкасейчас
Запускдальше

Разметка

<ol class="inst-stepper">
  <li class="inst-stepper-item" data-state="done">
    <span class="inst-stepper-name">Источник</span><span class="inst-stepper-note">готово</span></li>
  <li class="inst-stepper-item" data-state="done">
    <span class="inst-stepper-name">Правила</span><span class="inst-stepper-note">готово</span></li>
  <li class="inst-stepper-item" data-state="current">
    <span class="inst-stepper-name">Проверка</span><span class="inst-stepper-note">сейчас</span></li>
  <li class="inst-stepper-item" data-state="todo">
    <span class="inst-stepper-name">Запуск</span><span class="inst-stepper-note">дальше</span></li>
</ol>

Использование

<ol class="inst-stepper">
  <li class="inst-stepper-item" data-state="current">
    <span class="inst-stepper-name">Проверка</span>
    <span class="inst-stepper-note">сейчас</span>
  </li>
</ol>

Что	Обязательно	Почему
`<ol>` с `<li>`	да	Шаги упорядочены, и порядок — весь смысл компонента
`data-state` на каждом шаге, включая `todo`	да	Отсутствие атрибута неотличимо от опечатки в нём
`inst-stepper-note` со словом состояния	да	Цвет полосы не имеет права быть единственным носителем

Когда использовать

Используйте	Возьмите другое
Процесс с известным заранее числом этапов, который ведёт человек	Работа машины с раскрывающимся телом — шаг прогона: у него есть вывод, а здесь только подпись
Форма, разбитая на экраны	Свободный переход между видами — вкладки: у шагов есть порядок и незавершённость
Ход выполнения, у которого этапы названы	Доля выполненного числом — мера: полоса без имён этапов
—	История событий с временем — лента

Устройство

Подпись состояния

inst-stepper-note — не украшение и не подзаголовок. Это второй носитель состояния: «готово», «сейчас», «дальше» читаются и на распечатке, и тем, кто не различает оттенок полосы. Строка с датой или счётчиком в этом слоте состояние не сообщает и его не заменяет.

Раскладка

Полоса переносится сама: у элемента flex: 1 1 10rem, и на узком экране шаги встают в несколько рядов без единого медиазапроса. Полоса состояния — это ::before шириной во весь элемент, поэтому она не расходится с подписью при любом числе шагов.

Состояния

data-state — фаза жизни, словарь у компонента свой и закрытый:

Пример

Пройденготово
Текущийсейчас
Предстоящийдальше

Разметка

<ol class="inst-stepper">
  <li class="inst-stepper-item" data-state="done">
    <span class="inst-stepper-name">Пройден</span><span class="inst-stepper-note">готово</span></li>
  <li class="inst-stepper-item" data-state="current">
    <span class="inst-stepper-name">Текущий</span><span class="inst-stepper-note">сейчас</span></li>
  <li class="inst-stepper-item" data-state="todo">
    <span class="inst-stepper-name">Предстоящий</span><span class="inst-stepper-note">дальше</span></li>
</ol>

Значение	Значит	Что рисует
`todo`	Ещё не начат. База	Полоса `--track`, подпись `--text-secondary`
`current`	Идёт сейчас	Полоса `--accent-mark`, подпись `--text-primary` и `--weight-medium`
`done`	Завершён	Полоса `--accent-mark`, подпись `--text-secondary`

Базовое значение todo пишется в разметке, хотя правил под него нет: data-state="todo" читается, а его отсутствие — нет, и опечатка выглядела бы как база.

Пройденный и текущий шаг делят один цвет полосы намеренно: различает их inst-stepper-note — «готово» против «сейчас» — и начертание подписи. Второго акцентного тона в ките нет.

Правила

Так Слово состояния в каждом шаге

«готово», «сейчас», «дальше». Оно читается на распечатке и тем, кто не различает оттенок полосы.

Не так Дата вместо слова состояния

inst-stepper-note — носитель состояния, а не слот для произвольной подписи. Дата состояния не сообщает.

Так data-state="todo" явно

Отсутствие атрибута неотличимо от опечатки в нём. База пишется в разметке.

Не так Шаги вместо вкладок

У шагов есть порядок и незавершённость. Свободный переход между видами — это вкладки.

Доступность


Порядок	`<ol>` сообщает номер шага и их общее число без подписей вида «3 из 5»
Цвет не единственный носитель	Состояние ходит словом (`inst-stepper-note`) и полосой
Контраст	Название — `--text-secondary` (4.5:1), слово состояния — `--text-muted`; это данные, а не декорация, и `--text-faint` им не положен
Полоса	`--accent-mark` держит 3:1 против дорожки `--track` — это метка, а не текст
Кегль	Слово состояния — `--text-xs`, ниже 11px кит не опускается
Печать	Шаги печатаются: слово состояния читается на бумаге, где полоса могла бы слиться

API

Имя	Значение	Что делает
класс
`inst-stepper`	—	Список шагов. Ставится на `<ol>`
`inst-stepper-item`	—	Шаг. Носитель `data-state`
`inst-stepper-name`	—	Название шага
`inst-stepper-note`	—	Слово состояния под названием
атрибут
`data-state`	—	`todo` `current` `done`. Закрыт, база — `todo`
токен
`--gap-inline`	`var(--space-4)`
`--space-2`	`4px`
`--space-4`	`8px`
`--text-sm`	`0.8125rem`
`--text-xs`	`0.75rem`
`--weight-medium`	`500`
`--size-marker`	`2px`
`--radius-full`	`999px`
`--track`	`light-dark(oklch(0 0 0 / 0.10), oklch(1 0 0 / 0.16))`
`--accent-mark`	`light-dark(var(--a-4), var(--a-3))`
`--text-primary`	`light-dark(var(--n-12), var(--n-1))`
`--text-secondary`	`light-dark(var(--n-9), var(--n-5))`
`--text-muted`	`light-dark(var(--n-8), var(--n-6))`

Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument