Stepper#

Компонент используется для отображения пошаговой навигации в некотором процессе.

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации `Partial<Record<"vertical" / "root", string>>`	-
2	activeStep	Индекс текущего шага. Нумерация с 0 (number)	0
3	direction	Расположение элементов: "horizontal", "vertical"	"horizontal"
4	clickable	Шаги доступны для переключения (boolean)	-
5	onChange	Обработчик переключения. Для clickable = true `((index: number) => void)`	-

Step#

Для управления отображением каждого конкретного шага используется компонент Step.

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации `Partial<Record<"root" / "error" / "vertical" / "label" / "iconContainer" / "badge" / "active" / "completed" / "clickable" / "labelContainer" / "connector" / "descriptionContainer" / "description", string>>`	-
2	index	Индекс шага. Нумерация с 0 (number)	-
3	indexToShow	Индекс шага для отображения в случае несовпадения с основным индексом (number)	-
4	description	Дополнительный текст описания шага (ReactNode)	-
5	active	Шаг выбран (boolean)	-
6	completed	Шаг завершен (boolean)	-
7	disabled	Шаг заблокирован (boolean)	-
8	error	Шаг содержит ошибку (boolean)	-
9	icon	Иконка, отображаемая в обычном состоянии (ReactNode)	-
10	activeIcon	Иконка, отображаемая в текущем шаге (ReactNode)	-
11	completedIcon	Иконка, отображаемая в завершенном шаге (ReactNode)	-
12	showIconBadge	Отображать badge иконки в состоянии completed и error (boolean)	true

import { Stepper, Step } from '@v-uik/stepper'

Базовый пример#

import React, { useState } from 'react'
import { Step, Stepper } from '@v-uik/stepper'

export const Basic = (): JSX.Element => {
  const [activeStep, setActiveStep] = useState(2)

  return (
    <Stepper clickable activeStep={activeStep} onChange={setActiveStep}>
      {['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Disabled'].map(
        (step, index) => (
          <Step
            key={step}
            completed={activeStep > index}
            index={index}
            description={`${step} description`}
            error={index === 3}
            disabled={step === 'Disabled'}
          >
            {step}
          </Step>
        )
      )}
    </Stepper>
  )
}

Пример с пользовательскими иконками#

import * as React from 'react'
import { Stepper, Step } from '@v-uik/stepper'
import { Icon } from './assets/Icon'
import { IconActive } from './assets/IconActive'

export const CustomIcons = (): React.ReactElement => {
  return (
    <Stepper activeStep={2}>
      {['First', 'Second', 'Third', 'Fourth', 'Fifth'].map((step, index) => (
        <Step
          key={step}
          index={index}
          icon={<Icon />}
          activeIcon={<IconActive />}
          description={`${step} description`}
          error={index === 3}
        >
          {step}
        </Step>
      ))}
    </Stepper>
  )
}

Пример с вертикальным расположением#

import React, { useState } from 'react'
import { Step, Stepper } from '@v-uik/stepper'

export const VerticalStepper = (): JSX.Element => {
  const [activeStep, setActiveStep] = useState(2)

  return (
    <Stepper
      clickable
      direction="vertical"
      activeStep={activeStep}
      onChange={setActiveStep}
    >
      {['First', 'Second', 'Third', 'Fourth', 'Fifth'].map((step, index) => (
        <Step
          key={step}
          index={index}
          description={`${step} description`}
          error={index === 3}
        >
          {step}
        </Step>
      ))}
    </Stepper>
  )
}

Кастомизация с пользовательскими стилями#

import * as React from 'react'
import { createUseStyles } from '@v-uik/theme'
import { Stepper, Step } from '@v-uik/stepper'
import { IconMini } from './assets/IconMini'
import { IconCompletedMini } from './assets/IconCompletedMini'
import { IconActiveMini } from './assets/IconActiveMini'
import { IconErrorMini } from './assets/IconErrorMini'

const useStyles = createUseStyles({
  stepMini: {
    padding: [0, 8, 0, 0],
    borderRadius: 12,
  },

  iconContainerMini: {
    marginRight: 4,
  },

  descriptionMini: {
    marginLeft: 28,
  },

  connectorMini: {},

  verticalMini: {
    padding: [0, 0, 8, 0],

    '& $connectorMini': {
      marginTop: 4,
    },

    '& $descriptionMini': {
      marginLeft: 4,
    },

    '&:last-child': {
      '& $descriptionMini': {
        marginLeft: 28,
      },
    },
  },
})

export const Mini = (): React.ReactElement => {
  const classes = useStyles()

  const stepperMiniClasses = {
    root: classes.stepMini,
    iconContainer: classes.iconContainerMini,
    description: classes.descriptionMini,
    vertical: classes.verticalMini,
    connector: classes.connectorMini,
  }

  return (
    <Stepper activeStep={2}>
      {['First', 'Second', 'Third', 'Fourth', 'Fifth'].map((step, index) => {
        const error = index === 3

        return (
          <Step
            key={step}
            index={index}
            classes={stepperMiniClasses}
            icon={error ? <IconErrorMini /> : <IconMini />}
            activeIcon={<IconActiveMini />}
            completedIcon={<IconCompletedMini />}
            showIconBadge={false}
            error={error}
          >
            {step}
          </Step>
        )
      })}
    </Stepper>
  )
}