StepperBox

Компонент StepperBox является оберткой над компонентом Stepper из раздела Компоненты

import { StepperBox } from '@megafon/ui-shared';

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

<StepperBox
  items={Array(5).fill().map(item => ({
      title: 'Title text must be here',
      text: 'Description text must be short and easy to understand',
      linkText: 'Подробнее',
      linkUrl: '#',
  }))}
/>

Цифры вместо галочек

Показать код

<StepperBox
  isNumeric
  items={Array(5).fill().map(item => ({
      title: 'Title text must be here',
      text: 'Description text must be short and easy to understand',
      linkText: 'Подробнее',
      linkUrl: '#',
  }))}
/>

Горизонтальное выравнивание

Показать код

<StepperBox
  align="left"
  items={Array(4).fill().map(item => ({
      title: 'Title text must be here',
      text: 'Description text must be short and easy to understand',
      linkText: 'Подробнее',
      linkUrl: '#',
  }))}
/>

Вертикальное направление на разрешении экрана 0-767

Показать код

<StepperBox
  isVerticalMobile
  items={Array(4).fill().map(item => ({
      title: 'Title text must be here',
      text: 'Description text must be short and easy to understand',
      linkText: 'Подробнее',
      linkUrl: '#',
  }))}
/>

Prop name	Type	Default	Description
items*	StepperItemType[]		Шаги
isVerticalMobile	boolean \| undefined	false	Вертикальное направление на разрешении экрана 0-767
dataAttrs	{ root?: Record<string, string> \| undefined; itemsWrap?: Record<string, string> \| undefined; item?: Record<string, string> \| undefined; itemIconButton?: Record<...> \| undefined; itemTitle?: Record<...> \| undefined; itemText?: Record<...> \| undefined; itemLink?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; itemsWrap?: string \| undefined; item?: string \| undefined; itemIconButton?: string \| undefined; itemTitle?: string \| undefined; itemText?: string \| undefined; itemLink?: string \| undefined; } \| undefined		Дополнительные классы элементов
align	"left" \| "center" \| undefined	center	Выравнивание
isNumeric	boolean \| undefined		Цифры вместо галочек