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;
    },
]

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

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

Базовое использование c обратным порядком элементов на планшетах и мобильных устройствах

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

Базовое использование c нумерацией элементов на планшетах и мобильных устройствах

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

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

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

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

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

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

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

черный iPhone

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

черный iPhone 2

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

белый iPhone

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

android

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

new iphone

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

iphone 12

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

iphone 15

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

iphone-cropped

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

android-cropped

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

Выравнивание девайса по верхнему краю

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

ноутбук

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

ноутбук новый

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

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

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

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

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

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

<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.

<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
  instructionItems={iphoneCropedInstructionItems}
  pictureMask='iphone-cropped'
  showArrows={true}
  arrowsTheme="dark"
  pictureBackgroundColor="spbSky0"
/>

Дополнительное изображение с qr-кодом

<Instructions
  instructionItems={qrCodeInstructionItems}
  pictureMask='iphone-cropped'
  showArrows={true}
  arrowsTheme="dark"
  pictureBackgroundColor="spbSky0"
  pictureAlign="right"
/>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string>; item?: Record<string, string>; image?: Record<string, string>; mobileItemText?: Record<string, string>; wrapper?: Record<string, string>; arrowPrev?: Record<...>; arrowNext?: Record<...>; }		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
classes	{ instructionItem?: string; desktopInstructionItem?: string; mobileInstructionItem?: string; activeInstructionItem?: string; desktopItemTitle?: string; mobileItemTitle?: string; instructionItemImg?: string; additionalText?: string; arrowPrev?: string; arrowNext?: string; }		Дополнительные классы для внутренних элементов
title	string		Заголовок инструкции
instructionItems*	InstructionItemType[]		Пункты инструкции
additionalText	string		Описание после инструкции
pictureAlign	PictureAlignTypesType	left	Расположение изображения по горизонтали
pictureVerticalAlign	string	center	Расположение изображения по вертикали
pictureMask	PictureMaskTypesType	none	Маска изображения
pictureBackgroundColor	"spbSky0"		Цвет фона изображения
showArrows	boolean		Показать стрелки для смены пунктов инструкции
arrowsTheme	ArrowThemeType	dark	Цветовая тема стрелок навигации
elementOrder	ElementOrderType	default	Вертикальный порядок элементов на мобильных устройствах и планшетах
showMobileNumeration	boolean		Показать нумерацию пунктов инструкции на мобильных устройствах
getSwiper	(instance: Swiper) => void		Ref на swiper