Figma

Steps

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

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

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