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>

Тёмная цветовая тема стрелок навигации (deprecated)

Показать код

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

Навигация полосками внутри баннера

Стандартная (на сером и прозрачном фоне)

Показать код

<ContentArea>
  <Banner arrowTheme="white" paginationType="flat">
      <DemoSlide background="#F6F6F6">1</DemoSlide>
      <DemoSlide background="transparent">2</DemoSlide>
      <DemoSlide background="#F6F6F6">3</DemoSlide>
  </Banner>
</ContentArea>

Белая (на зелёном и фиолетовом фоне)

Показать код

<ContentArea>
  <Banner arrowTheme="white" paginationType="flat" backgroundColor="green">
      <DemoSlide background="#00B956">1</DemoSlide>
      <DemoSlide background="#731982">2</DemoSlide>
      <DemoSlide background="#00B956">3</DemoSlide>
  </Banner>
</ContentArea>

Тёмная (на градиентном и светлом фоне)

Показать код

<ContentArea>
  <Banner arrowTheme="white" paginationType="flat" backgroundColor="gradient">
      <DemoSlide background="transparent">1</DemoSlide>
      <DemoSlide background="#F6F2F9">2</DemoSlide>
      <DemoSlide background="transparent">3</DemoSlide>
  </Banner>
</ContentArea>

Прокрутка

C зацикливанием (плоские кнопки пагинации внутри баннера)

Показать код

<ContentArea>
  <Banner loop arrowTheme="white" paginationType="flat" backgroundColor="green">
      <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" paginationType="flat" backgroundColor="green">
      <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" paginationPosition="top-in" paginationTheme="dark" paginationType="flat" 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" paginationType="flat" 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 \| 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	{}	Дополнительные классы для корневого и внутренних элементов
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 атрибуты к внутренним элементам
paginationAlign	PaginationAlignType \| undefined	center	Выравнивание блока пагинации. DEPRECATED: 'left'
paginationTheme	PaginationThemeType \| undefined		Цветовая тема пагинации
paginationType	PaginationType \| undefined		Тип кнопок пагинации
paginationPosition	PaginationPositionType \| undefined		Расположение пагинации
withPaginationBottomOffset	boolean \| undefined	false	Предполагается использование с наезжанием на баннер следующего за баннером элемента
autoPlay	boolean \| undefined	false	Автоматическая прокрутка
autoPlayDelay	number \| undefined	5000	Задержка автоматической прокрутки
loop	boolean \| undefined	false	Прокрутка с зацикливанием
pauseOnHover	boolean \| undefined	false	Пауза автоматической прокрутки при наведении курсора на компонент
backgroundColor	BackgroundColorType \| undefined		Фоновый цвет
radius	RadiusType \| undefined	rounded	Радиус границы
navTheme	NavThemeType \| undefined		Цветовая тема навигации (не используется)
arrowTheme	ThemeType \| undefined	dark	Цветовая тема стрелок
autoHeight	boolean \| undefined	false	Автоматическая высота слайдов
noIncreaseAutoplayDelay	boolean \| undefined		Не увеличивать время прокрутки при взаимодействии с баннером
showNextSlide	boolean \| undefined		Показать часть следующего слайда
hasMarginTop	boolean \| undefined	false	Отступ сверху
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)