VideoBanner

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

Примеры и код

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

Демо данныеconst content: IContent = {
    title: 'Текст ≈40 симовлов. Короткие слова',
    description: 'Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.',
    href: '#',
    buttonTitle: 'Текст в кнопке',
    buttonColor: 'green',
    onButtonClick: () => {},
    textColor: 'black',
    linkTitle: 'Личный кабинет услуги',
    linkUrl: '#',
    cost: 'oт <b>1000 ₽</b> за сообщение',
}

const breadcrumbs = [
    {
        title: 'МегаФон',
        href: '#',
    },
    {
        title: 'Мобильная связь',
        href: '#',
    },
    {
        title: 'Тарифы',
        href: '#',
    },
];

Если в компоненте выбран тип видео 'youtube', то в качестве источника необходимо указать id видео:
<VideoBanner videoType="youtube" videoSrc="2Sps5MnvlKM" />

Если в компоненте не указан источник видео, то необходимо добавить изображения для всех разрешений.
<VideoBanner imageMobile='imageMobile' imageTablet='imageMobile' imageDesktop='imageDesktop' imageDesktopWide='imageDesktop' />

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

На мобильном разрешении отображается только картинка.

Показать код

<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Контент

Показать код

<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} content={content} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Без кнопки

Показать код

<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} content={contentWithoutButton} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Только изображение

Показать код

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={content} />
</ContentArea>

Хлебные крошки

Показать код

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={content} breadcrumbs={breadcrumbs} />
</ContentArea>

Видео с youtube

Показать код

<ContentArea>
  <VideoBanner videoType="youtube" videoSrc={youtubeVideoId} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Проигрывание видео на мобильном разрешении

Показать код

<ContentArea>
  <VideoBanner videoType="youtube" videoSrc={youtubeVideoId} videoMobile imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Определение цвета текста

На всех разрешениях тёмный цвет текста

Показать код

<ContentArea>
  <VideoBanner imageMobile={images.imageMobile} imageTablet={images.imageTablet.src} imageDesktop={images.imageDesktop.src} imageDesktopWide={images.imageDesktopWide.src} content={contentWithDefaultTextColor} breadcrumbs={breadcrumbs} />
</ContentArea>

Светлый цвет текста на мобильном разрешении

Показать код

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={images.imageTablet.src} imageDesktop={images.imageDesktop.src} imageDesktopWide={images.imageDesktopWide.src} content={contentWithDifferentTextColor} />
</ContentArea>

С тенью в нижней части

Показать код

<ContentArea>
  <VideoBanner imageMobile={images.imageMobile} imageTablet={images.imageTablet.src} imageDesktop={images.imageDesktop.src} imageDesktopWide={images.imageDesktopWide.src} content={contentWithDefaultTextColor} breadcrumbs={breadcrumbs} bottomShadow />
</ContentArea>

Цвета кнопок

Показать код

<ContentArea>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={content} />
  <br/>
  <VideoBanner imageMobile={imageMobile.src} imageTablet={imageMobile.src} imageDesktop={imageDesktop.src} imageDesktopWide={imageDesktop.src} content={contentWithPurpleButton} />
</ContentArea>

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

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

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

Демо данныеconst htmlTitle: '<a  href="https://moscow.megafon.ru">Текст</a><br><font color="#731982">≈40</font> символов.&nbspКороткие слова',
const htmlDescription = 'Описание&nbspдолжно <a href="https://moscow.megafon.ru">быть</a> <font color="#731982">примерно</font> не более 130 символов.<br>Пишите содержательно, кратно и не будет проблем с текстовым контентом.';

Показать код

<ContentArea>
  <VideoBanner videoType="video" videoSrc={video} content={contentWithHtml} imageMobile={imageMobile.src} imageTablet={imageMobile.src} />
</ContentArea>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; breadcrumbs?: Record<string, string> \| undefined; breadcrumbsLink?: Record<string, string> \| undefined; button?: Record<...> \| undefined; link?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; button?: string \| undefined; link?: string \| undefined; breadcrumbs?: string \| undefined; video?: string \| undefined; } \| undefined	{}	Дополнительные классы для корневого и внутренних элементов
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
content	IContent \| undefined		Данные для блока с контентом
videoSrc	string \| undefined		Источник видео.
videoType	VideoType \| undefined		Тип видео
videoMobile	boolean \| undefined	false	Разрешить проигрывать видео на мобильном разрешении
isMuted	boolean \| undefined	true	Наличие звука в видео
imageMobile*	string		Изображение для мобильного разрешения
imageTablet*	string		Изображение для планшетного разрешения
imageDesktop	string \| undefined		Изображение для компьютерного разрешения
imageDesktopWide	string \| undefined		Изображение для большого компьютерного разрешения
imageAlt	string \| undefined		Значение тега alt для изображения
breadcrumbs	ItemType[] \| undefined		Хлебные крошки
hasBreadcrumbsMicrodata	boolean \| undefined	false	Включить микроразметку хлебных крошек
bottomShadow	boolean \| undefined	false	Включить тень в нижней части компонента