Steps

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

Примеры и код

Свойства и методы

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

<ContentArea>
  <Steps title='Как подписаться' theme="gray">
      <StepsItem index={1} text="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину" />
      <StepsItem index={2} text="Выберите любой тариф из линейки «Включайся!», которым хотите пользоваться со скидкой 50% на абонентскую плату." />
      <StepsItem index={3} text="Оформите заказ и оплатите его удобным способом: онлайн или при получении" />
      <StepsItem index={4} text="Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту" />
      <StepsItem index={5} text="Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту" />
  </Steps>
</ContentArea>

Тема

Gray

<ContentArea>
      <Steps theme="gray" title='Как подписаться'>
          <StepsItem index={1} text="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину" />
          <StepsItem index={1} text="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину" />
      </Steps>
  </ContentArea>

White

<ContentArea>
      <div style={{ backgroundColor: 'var(--spbSky0)', padding: '20px 0' }}>
          <Steps theme="white" title='Как подписаться'>
              <StepsItem index={1} text="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину" />
              <StepsItem index={1} text="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину" />
          </Steps>
      </div>
  </ContentArea>

None

<ContentArea>
      <Steps title='Как подписаться'>
          <StepsItem index={1} text="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину" />
          <StepsItem index={1} text="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину" />
      </Steps>
  </ContentArea>

HTML-теги и спецсимволы

В свойствах title и text поддерживаются некоторые HTML-теги:
- для title: "<br>, <font color>, <a href>";
- для text: "<br>, <font color>, <a href>, <b>".

Также в обоих свойствах поддерживается спецсимвол &nbsp.

Демо данныеconst htmlTitle = 'Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>';
const htmlText = '<b>Текстовое</b> <font color="#731982">описание</font> не<br>должно <a href="https://moscow.megafon.ru">превышать</a> 150&nbspсимволов.';

<ContentArea>
  <Steps title={htmlTitle} theme="gray">
      <StepsItem index={1} text={htmlText} />
      <StepsItem index={2} text="Выберите любой тариф из линейки «Включайся!», которым хотите пользоваться со скидкой 50% на абонентскую плату." />
      <StepsItem index={3} text="Оформите заказ и оплатите его удобным способом: онлайн или при получении" />
      <StepsItem index={4} text="Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту" />
      <StepsItem index={5} text="Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту" />
  </Steps>
</ContentArea>

Prop name	Type	Default	Description
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ title?: string \| undefined; list?: string \| undefined; item?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
title	string \| undefined		Заголовок
theme	"white" \| "gray" \| "none" \| undefined	none	Цветовая тема. DEPRECATED: 'none'