Gravity UI – UIKit

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`	Максимальная ширина текстового контента степа.

Stepper

§Example

§Interactive items

§Different views

§Different sizes

§Disabled steps

§Custom icons

§Custom step separator

§Step with floating element

§Properties

§StepperItemProps

§CSS API