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
dataAttrs	{ root?: Record<string, string> \| undefined; swiper?: Record<string, string> \| undefined; slide?: Record<string, string> \| undefined; arrowPrev?: Record<...> \| undefined; ... 4 more ...; dotInner?: Record<...> \| undefined; } \| undefined	Дополнительные data атрибуты к внутренним элементам
className	string \| undefined	Сss класс для внешнего контейнера
classes	{ swiper?: string \| undefined; slide?: string \| undefined; arrow?: string \| undefined; arrowPrev?: string \| undefined; arrowNext?: string \| undefined; pagination?: string \| undefined; dot?: string \| undefined; noSwiping?: string \| undefined; } \| undefined	Дополнительные классы для корневого и внутренних элементов
paginationAlign	PaginationAlignType \| undefined	Выравнивание блока пагинации. DEPRECATED: 'left'
paginationTheme	PaginationThemeType \| undefined	Цветовая тема пагинации
paginationType	PaginationType \| undefined	Тип кнопок пагинации
paginationPosition	PaginationPositionType \| undefined	Расположение пагинации
withPaginationBottomOffset	boolean \| undefined	Предполагается использование с наезжанием на баннер следующего за баннером элемента
autoPlay	boolean \| undefined	Автоматическая прокрутка
autoPlayDelay	number \| undefined	Задержка автоматической прокрутки
loop	boolean \| undefined	Прокрутка с зацикливанием
pauseOnHover	boolean \| undefined	Пауза автоматической прокрутки при наведении курсора на компонент
backgroundColor	BackgroundColorType \| undefined	Фоновый цвет
radius	RadiusType \| undefined	Радиус границы
navTheme	NavThemeType \| undefined	Цветовая тема навигации (не используется)
noIncreaseAutoplayDelay	boolean \| undefined	Не увеличивать время прокрутки при взаимодействии с баннером
showNextSlide	boolean \| undefined	Показать часть следующего слайда
hasMarginTop	boolean \| undefined	Отступ сверху
getSwiper	((instance: Swiper) => void) \| undefined	Ref на swiper
onNextClick	((index: number) => void) \| undefined	Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback)
onPrevClick	((index: number) => void) \| undefined	Обработчик клика по стрелке "назад" (должен быть обернут в useCallback)
onDotClick	((index: number) => void) \| undefined	Обработчик клика по точке навигации (должен быть обернут в useCallback)
onChange	((index: number) => void) \| undefined	Обработчик смены слайда (должен быть обернут в useCallback)

PromoBannerSlide

Prop name	Type	Default	Description
className	string \| undefined		Дополнительный класс корневого элемента
title*	ReactNode \| ReactNode[]		Заголовок
description*	ReactNode \| ReactNode[]		Текст-описание
button	ButtonType \| undefined		Кнопка
extraButton	ButtonType \| undefined		Дополнительная кнопка
image*	ImageType		Изображение
background	BackgroundColorType \| undefined	dark-violet	Фон
classes	{ root?: string \| undefined; button?: string \| undefined; extraButton?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; image?: Record<string, string> \| undefined; desktopImageSource?: Record<string, string> \| undefined; tabletImageSource?: Record<...> \| undefined; buttonsWrapper?: Record<...> \| undefined; button?: Record<...> \| undefined; extraButton?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент

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