PromoBanner

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х

Изображения 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>

PromoBanner

Prop nameTypeDefaultDescription
classNamestringС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 атрибуты к внутренним элементам
withPaginationBottomOffsetbooleanПредполагается использование с наезжанием на баннер следующего за баннером элемента
autoPlaybooleanАвтоматическая прокрутка
autoPlayDelaynumberЗадержка автоматической прокрутки
loopbooleanПрокрутка с зацикливанием
pauseOnHoverbooleanПауза автоматической прокрутки при наведении курсора на компонент
backgroundColorBackgroundColorTypeФоновый цвет
radiusRadiusTypeРадиус границы
navThemeNavThemeTypeЦветовая тема навигации (не используется)
noIncreaseAutoplayDelaybooleanНе увеличивать время прокрутки при взаимодействии с баннером
showNextSlidebooleanПоказать часть следующего слайда
hasMarginTopbooleanОтступ сверху
getSwiper(instance: Swiper) => voidRef на swiper
onNextClick(index: number) => voidОбработчик клика по стрелке "вперед" (должен быть обернут в useCallback)
onPrevClick(index: number) => voidОбработчик клика по стрелке "назад" (должен быть обернут в useCallback)
onDotClick(index: number) => voidОбработчик клика по точке навигации (должен быть обернут в useCallback)
onChange(index: number) => voidОбработчик смены слайда (должен быть обернут в useCallback)

PromoBannerSlide

Prop nameTypeDefaultDescription
classNamestringДополнительный класс корневого элемента
title*ReactNode | ReactNode[]Заголовок
description*ReactNode | ReactNode[]Текст-описание
buttonButtonTypeКнопка
extraButtonButtonTypeДополнительная кнопка
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 атрибуты к внутренним элементам
rootRefRef<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;
};