Steps

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

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

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

Как подписаться

1
Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину
2
Выберите любой тариф из линейки «Включайся!», которым хотите пользоваться со скидкой 50% на абонентскую плату.
3
Оформите заказ и оплатите его удобным способом: онлайн или при получении
4
Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту
5
Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту

<ContentArea>
  <Steps title="Как подписаться">
    <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>

<ContentArea>
  <Steps title="Как подписаться">
    <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>

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символов.';

Скачивайте мобильное приложение МегаФон
по ссылке

1
Текстовое описание не
должно превышать 150 символов.
2
Выберите любой тариф из линейки «Включайся!», которым хотите пользоваться со скидкой 50% на абонентскую плату.
3
Оформите заказ и оплатите его удобным способом: онлайн или при получении
4
Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту
5
Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту

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

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

Steps

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

Как подписаться

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

Скачивайте мобильное приложение МегаФонпо ссылке

Скачивайте мобильное приложение МегаФон
по ссылке