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>

Цвет фона

Код DemoWrapperconst DemoWrapper: React.FC<IDemoProps> = ({ children }) => {
    const [currentBackground, setCurrentBackground] = React.useState<BackgroundColorType>(
        BackgroundColor.DARK_VIOLET,
    );

    const handleSelect = (
        _e: React.SyntheticEvent<EventTarget> | React.KeyboardEvent<HTMLDivElement> | null,
        data?: { value: BackgroundColorType; title: string },
    ) => {
        setCurrentBackground(data?.value);
    };

    const selectItems = Object.values(BackgroundColor).map(value => ({ value, title: value }));

    return (
        <div>
            <div style={{ width: '250px', marginBottom: '20px' }}>
                <Select label="Фон" currentValue={currentBackground} onSelect={handleSelect} items={selectItems} />
            </div>
            {children({
                background: currentBackground,
            })}
        </div>
    );
};


  <DemoWrapper>
      {({ background }) => (
          <PromoBanner>
              {[1, 2].map((_slide, index) => (
                  <PromoBannerSlide
                      key={index}
                      background={background}
                      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>
      )}
  </DemoWrapper>

Разная высота контента в слайдах


  <PromoBanner>
      <PromoBannerSlide
          title="Заголовок"
          description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)"
          button={{ title: 'Получить консультацию', href: '/' }}
          image={{
              desktopSrc: imageDesktop1x.src,
              tabletSrc: imageTablet1x.src,
              mobileSrc: imageMobile1x.src,
              alt: 'Alt'
          }}
      />
      <PromoBannerSlide
          title="Заголовок ≤ 45 символов, максимум 2 строки"
          description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку). <br /> Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки (4 если заголовок в одну строку)"
          button={{ title: 'Получить консультацию', href: '/' }}
          extraButton={{ title: 'Подключить', href: '/' }}
          image={{
              desktopSrc: imageDesktop1x.src, 
              tabletSrc: imageTablet1x.src, 
              mobileSrc: imageMobile1x.src, 
              alt: 'Alt' 
          }}
      />
      <PromoBannerSlide
          title="Заголовок ≤ 45 символов"
          description="Подзаголовок не более 130 символов, следите, чтобы разрешении 768 текст получался макс. в 3 строки"
          button={{ title: 'Получить консультацию', href: '/' }}
          image={{
              desktopSrc: imageDesktop1x.src, 
              tabletSrc: imageTablet1x.src, 
              mobileSrc: imageMobile1x.src, 
              alt: 'Alt' 
          }}
      />
      <PromoBannerSlide
          title="Заголовок ≤ 45 символов"
          description="Подзаголовок не более 130 символов"
          button={{ title: 'Получить консультацию', href: '/' }}
          image={{
              desktopSrc: imageDesktop1x.src,
              tabletSrc: imageTablet1x.src,
              mobileSrc: imageMobile1x.src,
              alt: 'Alt'
          }}
      />
      <PromoBannerSlide
          title="Заголовок ≤ 45 символов"
          description="Подзаголовок не более 130 символов"
          image={{
              desktopSrc: imageDesktop1x.src,
              tabletSrc: imageTablet1x.src,
              mobileSrc: imageMobile1x.src,
              alt: 'Alt'
          }}
      />
  </PromoBanner>

PromoBanner

Prop name	Type	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<...>; dotSvg?: Record<...>; dotInner?: Record<...>; }	Дополнительные data атрибуты к внутренним элементам
paginationAlign	"center" \| "left"	Выравнивание блока пагинации
paginationTheme	PaginationThemeType	Цветовая тема пагинации
paginationType	PaginationType	Тип кнопок пагинации
paginationPosition	PaginationPositionType	Расположение пагинации
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)

PromoBannerSlide

Prop name	Type	Default	Description
className	string		Дополнительный класс корневого элемента
title*	ReactNode \| ReactNode[]		Заголовок
description*	ReactNode \| ReactNode[]		Текст-описание
button	ButtonType		Кнопка
extraButton	ButtonType		Дополнительная кнопка
image*	ImageType		Изображение
background	BackgroundColorType	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 BackgroundColorType =
    | 'dark-violet'
    | 'light-violet'
    | 'green-20'
    | 'purple-20'
    | 'night-20'
    | 'flamingo-20'
    | 'berry-20'
    | 'gradient-purple-1'
    | 'gradient-purple-2'
    | 'gradient-purple-3'
    | 'gradient-purple-4';

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