Демо данные 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 }
imageTablet = { imageMobile }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
videoType = " video "
videoSrc = { video }
content = { content }
imageMobile = { imageMobile }
imageTablet = { imageMobile }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
videoType = " video "
videoSrc = { video }
content = { contentWithoutButton }
imageMobile = { imageMobile }
imageTablet = { imageMobile }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
imageMobile = { imageMobile }
imageTablet = { imageMobile }
imageDesktop = { imageDesktop }
imageDesktopWide = { imageDesktop }
content = { content }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
imageMobile = { imageMobile }
imageTablet = { imageMobile }
imageDesktop = { imageDesktop }
imageDesktopWide = { imageDesktop }
content = { content }
breadcrumbs = { breadcrumbs }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
videoType = " youtube "
videoSrc = { youtubeVideoId }
imageMobile = { imageMobile }
imageTablet = { imageMobile }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
videoType = " youtube "
videoSrc = { youtubeVideoId }
videoMobile
imageMobile = { imageMobile }
imageTablet = { imageMobile }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
imageMobile = { images . imageMobile }
imageTablet = { images . imageTablet }
imageDesktop = { images . imageDesktop }
imageDesktopWide = { images . imageDesktopWide }
content = { contentWithDefaultTextColor }
breadcrumbs = { breadcrumbs }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
imageMobile = { imageMobile }
imageTablet = { images . imageTablet }
imageDesktop = { images . imageDesktop }
imageDesktopWide = { images . imageDesktopWide }
content = { contentWithDifferentTextColor }
/>
</ ContentArea >
< ContentArea >
< VideoBanner
imageMobile = { images . imageMobile }
imageTablet = { images . imageTablet }
imageDesktop = { images . imageDesktop }
imageDesktopWide = { images . imageDesktopWide }
content = { contentWithDefaultTextColor }
breadcrumbs = { breadcrumbs }
bottomShadow
/>
</ ContentArea >
< ContentArea >
< VideoBanner
imageMobile = { imageMobile }
imageTablet = { imageMobile }
imageDesktop = { imageDesktop }
imageDesktopWide = { imageDesktop }
content = { content }
/>
< br />
< VideoBanner
imageMobile = { imageMobile }
imageTablet = { imageMobile }
imageDesktop = { imageDesktop }
imageDesktopWide = { imageDesktop }
content = { contentWithPurpleButton }
/>
</ ContentArea >
В свойстве 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> символов. Короткие слова' ,
const htmlDescription = 'Описание должно <a href="https://moscow.megafon.ru">быть</a> <font color="#731982">примерно</font> не более 130 символов.<br>Пишите содержательно, кратно и не будет проблем с текстовым контентом.' ;
< ContentArea >
< VideoBanner
videoType = " video "
videoSrc = { video }
content = { contentWithHtml }
imageMobile = { imageMobile }
imageTablet = { imageMobile }
/>
</ ContentArea >
