Banner

import { Banner } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Код DemoSlideexport const DemoSlide = ({ children, background = '#fff' }) => (
    <div
        style={{
            height: '100%',
            backgroundColor: background,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: '30px',
        }}
    >
        {children}
    </div>
);

Базовое использование

<ContentArea>
  <Banner arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
      <DemoSlide background="#10E272">4</DemoSlide>
      <DemoSlide background="#00B956">5</DemoSlide>
  </Banner>
</ContentArea>

Радиус баннера

Прямые углы

<ContentArea>
  <Banner radius="corners" arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
      <DemoSlide background="#10E272">4</DemoSlide>
      <DemoSlide background="#00B956">5</DemoSlide>
  </Banner>
</ContentArea>

Закругленные углы

<ContentArea>
  <Banner arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
      <DemoSlide background="#10E272">4</DemoSlide>
      <DemoSlide background="#00B956">5</DemoSlide>
  </Banner>
</ContentArea>

Цветовая тема стрелок навигации

Белая

<ContentArea>
  <Banner arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

Темная (deprecated)

<ContentArea>
  <Banner arrowTheme="dark">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

Прокрутка

C зацикливанием

<ContentArea>
  <Banner loop arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

Автоматическая прокрутка

<ContentArea>
  <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#10E272">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

По умолчанию время прокрутки увеличивается при взаимодействии со слайдером. Данный функционал можно отключить с помощью флага noIncreaseAutoplayDelay.

<ContentArea>
      <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white" noIncreaseAutoplayDelay>
          <DemoSlide background="#00B956">1</DemoSlide>
          <DemoSlide background="#10E272">2</DemoSlide>
          <DemoSlide background="#00B956">3</DemoSlide>
      </Banner>
  </ContentArea>

Пауза прокрутки при наведении курсора на компонент

<ContentArea>
  <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white" pauseOnHover>
      <DemoSlide background="#EDEDED">1</DemoSlide>
      <DemoSlide background="#F6F6F6">2</DemoSlide>
      <DemoSlide background="#EDEDED">3</DemoSlide>
  </Banner>
</ContentArea>

Единственный слайд

Если слайд единственный стрелки и навигация скрываются, автопрокрутка отключается

<ContentArea>
      <Banner loop autoPlay autoPlayDelay={3000} arrowTheme="white" pauseOnHover noIncreaseAutoplayDelay>
          <DemoSlide background="#00B956">1</DemoSlide>
      </Banner>
  </ContentArea>

Показать следующий слайд на мобильном разрешении

В данном случае анимация прокрутки слайдов меняется и становится, как в карусели, часть следующего слайда видна

<ContentArea>
      <Banner arrowTheme="white" showNextSlide>
          <DemoSlide background="#EDEDED">1</DemoSlide>
          <DemoSlide background="#F6F6F6">2</DemoSlide>
          <DemoSlide background="#EDEDED">3</DemoSlide>
      </Banner>
  </ContentArea>

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	false	Предполагается использование с наезжанием на баннер следующего за баннером элемента
autoPlay	boolean	false	Автоматическая прокрутка
autoPlayDelay	number	5000	Задержка автоматической прокрутки
loop	boolean	false	Прокрутка с зацикливанием
pauseOnHover	boolean	false	Пауза автоматической прокрутки при наведении курсора на компонент
backgroundColor	BackgroundColorType	transparent	Фоновый цвет
radius	RadiusType	rounded	Радиус границы
navTheme	NavThemeType		Цветовая тема навигации (не используется)
arrowTheme	ThemeType	dark	Цветовая тема стрелок
autoHeight	boolean	false	Автоматическая высота слайдов
noIncreaseAutoplayDelay	boolean		Не увеличивать время прокрутки при взаимодействии с баннером
showNextSlide	boolean		Показать часть следующего слайда
hasMarginTop	boolean	false	Отступ сверху
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)