Stepper
Maintainer:
bityutskiyAO
size
view
import {Stepper} from '@gravity-ui/uikit';
Stepper - это компонент, который отображает прогресс при помощи последовательности пронумерованных шагов. Компонент обеспечивает возможность использования wizard-like процессов работы.
Example
<Stepper>
<Stepper.Item>Step 1</Stepper.Item>
<Stepper.Item>Step 2</Stepper.Item>
<Stepper.Item>Step 3</Stepper.Item>
<Stepper.Item>Step 4 with very long title</Stepper.Item>
</Stepper>Interactive items
Используйте onUpdate и value параметры вместе с кастомным состоянием для управления шагами
<Stepper value={0} onUpdate={(id) => alert(id)}>
<Stepper.Item>Step 1</Stepper.Item>
<Stepper.Item>Step 2</Stepper.Item>
<Stepper.Item>Step 3</Stepper.Item>
<Stepper.Item>Step 4 with very long title</Stepper.Item>
</Stepper>Different views
<Stepper>
<Stepper.Item>Step 1</Stepper.Item>
<Stepper.Item view="error">Step 2</Stepper.Item>
<Stepper.Item view="error">Step 3</Stepper.Item>
<Stepper.Item view="success">Step 4</Stepper.Item>
</Stepper>Different sizes
<Stepper size="l">
<Stepper.Item>Step 1</Stepper.Item>
<Stepper.Item>Step 2</Stepper.Item>
<Stepper.Item>Step 3</Stepper.Item>
<Stepper.Item>Step 4</Stepper.Item>
</Stepper>Disabled steps
<Stepper>
<Stepper.Item>Step 1</Stepper.Item>
<Stepper.Item disabled>Step 2</Stepper.Item>
<Stepper.Item disabled>Step 3</Stepper.Item>
<Stepper.Item disabled>Step 4 with very long title</Stepper.Item>
</Stepper>Custom icons
<Stepper>
<Stepper.Item icon={<Icon data={Gear} />}>Step 1</Stepper.Item>
<Stepper.Item icon={<Icon data={Rocket} />}>Step 2</Stepper.Item>
<Stepper.Item icon={<Icon data={Cloud} />}>Step 3</Stepper.Item>
<Stepper.Item icon={<Icon data={Hammer} />}>Step 4 with very long title</Stepper.Item>
</Stepper>Custom step separator
<Stepper separator=">">
<Stepper.Item>Step 1</Stepper.Item>
<Stepper.Item view="error">Step 2</Stepper.Item>
<Stepper.Item view="success">Step 3</Stepper.Item>
<Stepper.Item>Step 4 with very long title</Stepper.Item>
</Stepper>Step with floating element
<Stepper>
<Tooltip content="fancy step with tooltip">
<Stepper.Item>Step 1</Stepper.Item>
</Tooltip>
<Stepper.Item view="error">Step 2</Stepper.Item>
<Stepper.Item view="success">Step 3</Stepper.Item>
<Stepper.Item>Step 4 with very long title</Stepper.Item>
</Stepper>Properties
| Name | Description | Type | Default |
|---|---|---|---|
| children | Дочерние элементы степера. | React.ReactElement<StepperItemProps> | |
| size | Задает размер степа. | "s" "m" "l" | "s" |
| value | Текущий выбранный идентификатор степа. | number string | |
| onUpdate | Функция для обновления текущего выбранного элемента. | Function | |
| qa | data-qa HTML атрибут, используется для тестирования. | string | |
| separator | Кастомная нода-разделитель степов. | React.ReactNode | |
| className | CSS имя класса Step контейнера. | string | |
| style | Задает инлайн-стили Step контейнера. | CSSProperties | |
| aria-label | Определяет строковое значение, используемое в качестве метки для текущего элемента. | string | |
| aria-labelledby | Определяет элементы, используемые в качестве метки для текущего элемента. | string | |
| aria-describedby | Определяет элементы, описывающие объект. | string |
StepperItemProps
| Name | Description | Type | Default |
|---|---|---|---|
| id | Идентификатора степа. Если не передан, берется значения индекса массива. | string number | |
| view | Внешний вид степа. | "idle" "error" "success" | "idle" |
| children | Внутреннее содержимое степа. | React.Node | |
| disabled | Устанавливает заблокированное состояние для степа. | boolean | |
| icon | Задает кастомную иконка степа | SVGIconData | |
| onClick | Обработчик клика на степ | React.MouseEventHandler | |
| className | CSS class name элемента | string |
CSS API
| Name | Description |
|---|---|
--g-stepper-gap | Расстояние между степами и разделителем. |
--g-stepper-item-text-max-width | Максимальная ширина текстового контента степа. |