Instructions

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

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

Демо данныеconst items = [
    {
        title:  'Пункт инструкции №1';
        mediaUrl: '/instructions/1.png';
        isVideo: true;
    },
    {
        title: 'Пункт инструкции №2';
        mediaUrl: '/instructions/2.png',
        isVideo: false;
    },
]

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

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions title="Как подписаться" instructionItems={items} />

<Instructions title="Как подписаться" instructionItems={items} />

Видео контент

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions title="Как подписаться" instructionItems={itemsWithVideo} />

<Instructions title="Как подписаться" instructionItems={itemsWithVideo} />

Изображение справа

По умолчанию располагается слева

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={items}
  pictureAlign="right"
/>

<Instructions
  title="Как подписаться"
  instructionItems={items}
  pictureAlign="right"
/>

Рамка для изображения

черный iPhone

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={iphoneInstructionItems}
  pictureMask="black-iphone"
/>

<Instructions
  title="Как подписаться"
  instructionItems={iphoneInstructionItems}
  pictureMask="black-iphone"
/>

белый iPhone

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={iphoneInstructionItems}
  pictureMask="white-iphone"
/>

<Instructions
  title="Как подписаться"
  instructionItems={iphoneInstructionItems}
  pictureMask="white-iphone"
/>

android

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={androidInstructionItems}
  pictureMask="android"
/>

<Instructions
  title="Как подписаться"
  instructionItems={androidInstructionItems}
  pictureMask="android"
/>

new iphone

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={newIphoneInstructionItems}
  pictureMask="new-iphone"
/>

<Instructions
  title="Как подписаться"
  instructionItems={newIphoneInstructionItems}
  pictureMask="new-iphone"
/>

iphone 12

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={iphone12InstructionItems}
  pictureMask="iphone-12"
/>

<Instructions
  title="Как подписаться"
  instructionItems={iphone12InstructionItems}
  pictureMask="iphone-12"
/>

ноутбук

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={laptopInstructionItems}
  pictureMask="laptop"
/>

<Instructions
  title="Как подписаться"
  instructionItems={laptopInstructionItems}
  pictureMask="laptop"
/>

Небольшое количество пунктов

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

<Instructions
  title="Как подписаться"
  instructionItems={[items[0], items[1]]}
/>

<Instructions
  title="Как подписаться"
  instructionItems={[items[0], items[1]]}
/>

Дополнительный текст

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

<Instructions
  title="Как подписаться"
  instructionItems={items}
  additionalText="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину"
/>

<Instructions
  title="Как подписаться"
  instructionItems={items}
  additionalText="Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину"
/>

Использование с children

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

Важное уведомление

<Instructions title="Как подписаться" instructionItems={items}>
  <strong
    style={{
      display: 'block',
      color: 'red',
      margin: '32px auto',
      textAlign: 'center',
    }}
  >
    Важное уведомление
  </strong>
</Instructions>

<Instructions title="Как подписаться" instructionItems={items}>
  <strong
    style={{
      display: 'block',
      color: 'red',
      margin: '32px auto',
      textAlign: 'center',
    }}
  >
    Важное уведомление
  </strong>
</Instructions>

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

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

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

Авторизуйтесь на сайте сервиса special.megafon.ru, перейдите в магазин и добавьте покупки в корзину

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

Текстовое описание не
должно превышать 150 символов.

Важное уведомление

<Instructions
  title='Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>'
  instructionItems={items}
  additionalText='<b>Текстовое</b> <font color="#731982">описание</font> не<br>должно <a href="https://moscow.megafon.ru">превышать</a> 150&nbspсимволов.'
>
  <strong
    style={{
      display: 'block',
      color: 'red',
      margin: '32px auto',
      textAlign: 'center',
    }}
  >
    Важное уведомление
  </strong>
</Instructions>

<Instructions
  title='Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>'
  instructionItems={items}
  additionalText='<b>Текстовое</b> <font color="#731982">описание</font> не<br>должно <a href="https://moscow.megafon.ru">превышать</a> 150&nbspсимволов.'
>
  <strong
    style={{
      display: 'block',
      color: 'red',
      margin: '32px auto',
      textAlign: 'center',
    }}
  >
    Важное уведомление
  </strong>
</Instructions>

Instructions

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

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

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

Видео контент

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

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

Изображение справа

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

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

Рамка для изображения

черный iPhone

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

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

белый iPhone

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

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

android

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

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

new iphone

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

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

iphone 12

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

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

ноутбук

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

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

Небольшое количество пунктов

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

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

Дополнительный текст

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

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

Использование с children

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

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

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

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

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

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

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