BannerBox

Компонент BannerBox является оберткой над компонентом Banner из раздела Компоненты и имеет идентичные свойства и методы

import { BannerBox } from '@megafon/ui-shared';

Код DemoSlideexport const DemoSlide = ({
    className,
    children,
}: {
    className?: string;
    children: React.ReactNode;
}): React.ReactNode => (
    <div
        className={className}
        style={{
            backgroundColor: '#ccc',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: '30px',
        }}
    >
        {children}
    </div>
);

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

<ContentArea>
  <BannerBox>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
  </BannerBox>
</ContentArea>

Использование с блоком, перекрывающим баннер

<ContentArea>
  <BannerBox withPaginationBottomOffset>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
  </BannerBox>
</ContentArea>

Использование вместе с ImageBanner

<ContentArea>
  <BannerBox autoHeight arrowTheme="white">
      <ImageBannerSlide hasImage>
          <Button theme="white" sizeMobile="medium" sizeAll="large" href="#" fullWidthMobile>
              Кнопка 1
          </Button>
          <Button theme="white" type="outline" sizeMobile="medium" sizeAll="large" href="#" fullWidthMobile>
              Кнопка 2
          </Button>
      </ImageBannerSlide>
      <ImageBannerSlide hasImage />
  </BannerBox>
</ContentArea>

Без изображения

<ContentArea>
  <BannerBox autoHeight arrowTheme="white">
      <ImageBannerSlide />
      <ImageBannerSlide />
  </BannerBox>
</ContentArea>