import { PromoBanner, PromoBannerSlide } from '@megafon/ui-shared';
<PromoBanner> <PromoBannerSlide title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> </PromoBanner>
<PromoBanner> <PromoBannerSlide title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> <PromoBannerSlide title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> </PromoBanner>
Изображения 2х будут загружаться только на соотвествующих экранах
<PromoBanner> <PromoBannerSlide title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" image={{ desktopSrc: imageDesktop1x.src, desktopSrc2x: imageDesktop2x.src, tabletSrc: imageTablet1x.src, tabletSrc2x: imageTablet2x.src, mobileSrc: imageMobile1x.src, mobileSrc2x: imageMobile2x.src, alt: 'Alt' }} /> </PromoBanner>
<PromoBanner> <PromoBannerSlide title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" button={{ title: 'Получить консультацию', href: '/', target: '_blank', rel: 'nofollow' }} extraButton={{ title: 'Подключить', href: '/', target: '_blank', rel: 'nofollow' }} image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> </PromoBanner>
<PromoBanner> <PromoBannerSlide background="light-violet" title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> <PromoBannerSlide background="dark-violet" title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> </PromoBanner>
<PromoBanner> <PromoBannerSlide title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" button={{ title: 'Получить консультацию', href: '/', target: '_blank', rel: 'nofollow' }} extraButton={{ title: 'Подключить', href: '/', target: '_blank', rel: 'nofollow' }} image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> <PromoBannerSlide title="Заголовок ≤ 45 символов, максимум 2 строки" description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)" image={{ desktopSrc: imageDesktop1x.src, tabletSrc: imageTablet1x.src, mobileSrc: imageMobile1x.src, alt: 'Alt' }} /> </PromoBanner>
Prop name | Type | Default | Description |
---|---|---|---|
className | string | Сss класс для внешнего контейнера | |
classes | { swiper?: string; slide?: string; arrow?: string; arrowPrev?: string; arrowNext?: string; pagination?: string; dot?: string; noSwiping?: string; } | Дополнительные классы для корневого и внутренних элементов | |
dataAttrs | { root?: Record<string, string>; swiper?: Record<string, string>; slide?: Record<string, string>; arrowPrev?: Record<string, string>; arrowNext?: Record<string, string>; pagination?: Record<...>; dot?: Record<...>; } | Дополнительные data атрибуты к внутренним элементам | |
withPaginationBottomOffset | boolean | Предполагается использование с наезжанием на баннер следующего за баннером элемента | |
autoPlay | boolean | Автоматическая прокрутка | |
autoPlayDelay | number | Задержка автоматической прокрутки | |
loop | boolean | Прокрутка с зацикливанием | |
pauseOnHover | boolean | Пауза автоматической прокрутки при наведении курсора на компонент | |
backgroundColor | BackgroundColorType | Фоновый цвет | |
radius | RadiusType | Радиус границы | |
navTheme | NavThemeType | Цветовая тема навигации (не используется) | |
noIncreaseAutoplayDelay | boolean | Не увеличивать время прокрутки при взаимодействии с баннером | |
showNextSlide | boolean | Показать часть следующего слайда | |
hasMarginTop | boolean | Отступ сверху | |
getSwiper | (instance: Swiper) => void | Ref на swiper | |
onNextClick | (index: number) => void | Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) | |
onPrevClick | (index: number) => void | Обработчик клика по стрелке "назад" (должен быть обернут в useCallback) | |
onDotClick | (index: number) => void | Обработчик клика по точке навигации (должен быть обернут в useCallback) | |
onChange | (index: number) => void | Обработчик смены слайда (должен быть обернут в useCallback) |
Prop name | Type | Default | Description |
---|---|---|---|
className | string | Дополнительный класс корневого элемента | |
title* | ReactNode | ReactNode[] | Заголовок | |
description* | ReactNode | ReactNode[] | Текст-описание | |
button | ButtonType | Кнопка | |
extraButton | ButtonType | Дополнительная кнопка | |
image* | ImageType | Изображение | |
background | "light-violet" | "dark-violet" | dark-violet | Фон |
classes | { root?: string; button?: string; extraButton?: string; } | Дополнительные классы для корневого и внутренних элементов | |
dataAttrs | { root?: Record<string, string>; image?: Record<string, string>; desktopImageSource?: Record<string, string>; tabletImageSource?: Record<string, string>; buttonsWrapper?: Record<...>; button?: Record<...>; extraButton?: Record<...>; } | Дополнительные data атрибуты к внутренним элементам | |
rootRef | Ref<HTMLDivElement> | Ссылка на корневой элемент |
type ButtonType = {/** Заголовок */title?: string;/** Ссылка */href?: string;/** Target - свойство тега <a> */target?: '_self' | '_blank';/** Rel - атрибут тега <a> */rel?: string;/** Обработчик клика по кнопке */onClick?: (e: React.SyntheticEvent<EventTarget>) => void;};type ImageType = {/** Изображение на разрешении экрана 1024+ */desktopSrc: string;/** Изображение 2x на разрешении экрана 1024+ */desktopSrc2x?: string;/** Изображение на разрешении экрана 768-1023 */tabletSrc: string;/** Изображение 2x на разрешении экрана 768-1023 */tabletSrc2x?: string;/** Изображение на разрешении экрана 0-767 */mobileSrc: string;/** Изображение 2x на разрешении экрана 0-767 */mobileSrc2x?: string;/** Значение тега alt для изображения */alt?: string;};