> For the complete documentation index, see [llms.txt](https://prizmds.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://prizmds.gitbook.io/documentation/components/stepper.md).

# Stepper

## <mark style="color:blue;">Общая информация</mark>

Степпер или индикатор прогресса — это визуальное представление прогресса пользователя через набор шагов, направляющих к завершению определенного процесса.

## <mark style="color:blue;">Анатомия</mark>

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Ftb9YT0coI8tbGp9Ut7Be%2FFrame%2023476816-1.png?alt=media&amp;token=3cc0cfc3-671a-4994-9f85-70986015378b" alt="" width="263"><figcaption></figcaption></figure>

1. Step number. Номер шага.&#x20;
2. Name. Название шага, не обязательное, но рекомендуемое.&#x20;
3. Divider. Линия-разделитель, нет у последнего шага.

## <mark style="color:blue;">Описание работы</mark>

{% hint style="info" %}
Используйте степпер, чтобы держать пользователя в курсе при выполнении конкретной задачи. Разделяя конечную цель на более мелкие подзадачи, вы облегчаете когнитивную нагрузку на вашего пользователя.
{% endhint %}

### Логический порядок

Разместите шаги в порядке логики и требований к выполнению. Лучше размещать шаги слева направо, но при недостатке пространства или особенностях проектирования страницы предусмотрен вертикальный степпер.

### Шаги и их доступность&#x20;

Информируйте пользователя о текущем шаге - о том, где он в настоящее время находится в процессе или задаче. Разрешите пользователю вернуться к предыдущим шагам, чтобы просмотреть отправленные данные. Это даст ему ощущение контроля.

### Названия шагов

Степпер должен сопровождаться четкими названиями шагов, указывающими, что пользователь выполнит на каждом шаге. Опишите название одним-двумя словами. Дополнительно можно использовать вспомогательный текст (он также должен быть коротким и емким).

Допускается использование степпера без названий шагов и вспомогательного текста при условиях:

* степпер содержит 3-4 шага&#x20;
* контекст степпера понятен пользователю (это доказано пользовательскими исследованиями).

### Проверка

Используйте проверку, чтобы подтвердить, что предыдущий шаг был завершен. Если пользователь не может перейти к следующему шагу без предварительного выполнения задачи, используйте встроенное уведомление (Message), чтобы проинформировать его об этом.

### Типы шагов

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F8vpJVglmMfcvbanNtisf%2FFrame%2023476816.png?alt=media&amp;token=78b492ab-66c5-4bd5-bad7-d615eee28ce9" alt=""><figcaption></figcaption></figure>

### Общие правила и принципы

Каждый шаг обозначается своим порядковым номером. Если шаг имеет индикацию Success, Warning, Danger, то при выборе такого шага его порядковый номер меняется на иконку-индикатор.

1. Выбран шаг №1. Его Status: Default (действия не выполнены)

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FZUMziBbDcA4x4hZ6ecvZ%2FExample%20for%20stepper-2.png?alt=media&amp;token=5ab566d5-4267-494d-973c-d032a6da52e8" alt="" width="563"><figcaption></figcaption></figure>

2. Выбран шаг №1. Его Status: Success (действия выполнены)

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FwgNlZ1dx3HUeNoMzI9uQ%2FExample%20for%20stepper-4.png?alt=media&amp;token=56d090be-a71f-4649-9566-8fcb4fdf0bb3" alt="" width="563"><figcaption></figcaption></figure>

2. Выбран шаг №2.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FcjprlN7Y16Az9W1gAUr3%2FExample%20for%20stepper-5.png?alt=media&amp;token=2e51c796-af70-48ad-a938-7e67fddfe02b" alt="" width="563"><figcaption></figcaption></figure>

Переход от одного шага к другому может осуществляться одним из следующих способов или комбинацией этих способов:

* кликом на кнопки перехода (панель снизу)&#x20;
* кликом на кнопки перехода + кликом на шаг (кружок с номером / галочкой + название).

Переход только прокликиванием шагов не используется. Если шаг заполнен, то кнопка перехода к следующему оформляется как Fill Primary:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FQKiTmqvJougWIpuCl9Xf%2FExample%20for%20stepper-7.png?alt=media&amp;token=ff8a1428-6006-401b-9859-1343e13f4ba1" alt="" width="563"><figcaption></figcaption></figure>

Есть 2 возможных сценария:&#x20;

1. Пользователь может просмотреть вкладки с последующими шагами&#x20;
2. Шаг заблокирован до тех пор, пока не выполнен предыдущий шаг.

### С возможностью просмотра следующих шагов

Текущий шаг не выполнен, кнопка перехода на следующий шаг Outline secondary:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FrGaOXNMwjujf8E0BwTsY%2FExample%20for%20stepper-3.png?alt=media&amp;token=aa7359b5-cd30-4709-8713-3fb4e927829f" alt="" width="563"><figcaption></figcaption></figure>

### Без возможности просмотра следующих шагов

Проектировщик интерфейса может запретить переход на следующий шаг без выполнения предыдущего. В примере ниже переход к оплате заблокирован до внесения информации о получателе.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FmbxByoQjy0scjvHlnF60%2FExample%20for%20stepper-6.png?alt=media&amp;token=c62314b2-9d2c-4e3d-b16a-1b882b5d80fa" alt="" width="563"><figcaption></figcaption></figure>

## <mark style="color:blue;">Размеры и оформление</mark>

### Внутренние отступы

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FMnadBLwz8Hw9oFHqRltB%2FFrame%2023476816-2.png?alt=media&amp;token=b49d3e21-813d-4d9b-910e-1a657598f480" alt="" width="546"><figcaption></figcaption></figure>

| Элемент                                                  | Значение          |
| -------------------------------------------------------- | ----------------- |
| Step number                                              | <p>24 px \* 24 px |
| <br>Icon (Check): 16 px \* 16 px                         |                   |
| <br>Border: 1 px (solid) (default/hover; unselected)</p> |                   |
| Divider                                                  | 2 px              |

### Типографика

<table><thead><tr><th>Элемент</th><th width="225.80078125">Название стиля</th><th>Гарнитура</th><th>Кегль</th><th>Начертание</th></tr></thead><tbody><tr><td>Number </td><td>Component/Button/btn-12</td><td>Inter</td><td>12 px</td><td>Semi Bold</td></tr><tr><td>Text</td><td>Component/Button/btn-14</td><td>Inter</td><td>14 px</td><td>Semi Bold</td></tr></tbody></table>

### Внешние отступы

Stepper размещается в контейнер с отступами 16рх.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FHheR3Dz1VSZmwfhoXPTE%2FFrame%2023476816.png?alt=media&amp;token=994e75fb-06df-47c3-a09f-3092e0b04fd6" alt=""><figcaption></figcaption></figure>

Аналогично для вертикального Stepper:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2F1WWdPz9s8ExNZDTk8zsZ%2FFrame%2023476817.png?alt=media&amp;token=3fad499c-0248-478a-823f-047c3d51fc83" alt="" width="399"><figcaption></figcaption></figure>

### Адаптивность

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FFibnNPWuvMddFGx2KsQs%2FExample%20for%20stepper.png?alt=media&amp;token=541201a1-5c1a-407f-a409-38072f7200d8" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Состояния (State)</mark>

### Интерактивность

Для повышения доступности клика в качестве интерактивной задается область шага (включающая номер шага и название). Клик по шагу приводит к переходу на него:

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FmdLcLWras7AkZjf3yHj9%2FFrame%20234768cxd%20vc16.png?alt=media&amp;token=120f107b-7919-4ad1-a141-719a9aa9b670" alt="" width="251"><figcaption></figcaption></figure>

### Состояния (State)

3 основных состояния шага:

1. Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с шагом (шаг при этом может быть выбран / не выбран, выполнен, быть следующим или текущим)&#x20;
2. Hover — при наведении курсора&#x20;
3. Active — текущий шаг
4. Disable — неактивное (недоступное для взаимодействия).

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2Fi58Jpxse1Jzvimsa1493%2FFrame%2023476816-3.png?alt=media&amp;token=e3c4ece2-56db-41ba-87e5-266b5bc9e31f" alt="" width="563"><figcaption></figcaption></figure>

### Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора шага с помощью клавиатуры или при клике на него, и может быть совмещен с состояниями Default, Hover, Active. Невозможен в состоянии Disabled.

<figure><img src="https://4122576536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrqHekF3kQhhBvtSAI6Bj%2Fuploads%2FVAzuIioHnmAwbVSUTlCN%2FExample%20for%20stepper-1.png?alt=media&amp;token=3c615e39-4f8c-4230-abbf-67723a3025ed" alt=""><figcaption></figcaption></figure>

### Взаимодействие с клавиатуры

Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом компоненте. Если шаги располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →.