Компонент BannerBox является оберткой над компонентом Banner из раздела Компоненты и имеет идентичные свойства и методы
import { BannerBox } from '@megafon/ui-shared';Код DemoSlideexport const DemoSlide = ({ children, background }) => {
return (
<div
style={{
height: '100%',
backgroundColor: 'white',
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>
≈ 30 символов с пробелами
oт
≈ 30 символов с пробелами
oт
<ContentArea>
<BannerBox autoHeight backgroundColor="green" arrowTheme="white">
<ImageBannerSlide hasImage>
<Button
theme="purple"
sizeMobile="medium"
sizeAll="large"
href="#"
fullWidthMobile
>
Кнопка 1
</Button>
<Button
theme="white"
type="text"
sizeMobile="medium"
sizeAll="large"
href="#"
fullWidthMobile
>
Кнопка 2
</Button>
</ImageBannerSlide>
<ImageBannerSlide hasImage>
<Button
theme="purple"
sizeMobile="medium"
sizeAll="large"
href="#"
fullWidthMobile
>
Кнопка 1
</Button>
<Button
theme="white"
type="text"
sizeMobile="medium"
sizeAll="large"
href="#"
fullWidthMobile
>
Кнопка 2
</Button>
</ImageBannerSlide>
</BannerBox>
</ContentArea>
≈ 30 символов с пробелами
oт
≈ 30 символов с пробелами
oт
<ContentArea>
<BannerBox autoHeight backgroundColor="green" arrowTheme="white">
<ImageBannerSlide />
<ImageBannerSlide />
</BannerBox>
</ContentArea>