Carousel
Набор компонентов для создания списков с прокруткой (галерей).
Storybook
Состав
При сборке карусели используйте структуру, в которой корневым элементом
является Carousel
со вложенными в него CarouselItem
или CarouselCol
.
При необходимости отображения элементов карусели в сетке, оборачивайте карусель в CarouselGridWrapper
.
Carousel
CarouselGridWrapper
CarouselItem
CarouselCol
Использование
CSS Scroll Snap
- В компоненте
Carousel
укажите свойствоscrollSnapType
:
MyGallery.tsx
import React from 'react';
import { Carousel } from '@salutejs/plasma-web';
export const MyGallery = () = (
<Carousel scrollSnapType="mandatory">
// Элементы карусели помещаются здесь
</Carousel>
);
- Также укажите свойство
scrollSnapAlign
для элеме нта карусели:
MyGallery.tsx
import React from 'react';
import { CarouselItem } from '@salutejs/plasma-web';
export const MyGalleryItem = ({ children }) => (
<CarouselItem scrollSnapAlign="center">{children}</CarouselItem>
);
Определение центрального элемента
Карусель может определять активный элемент при прокрутке.
Для этого укажите свойства detectActive
, detectThreshold
и обработчик onIndexChange
:
MyGallery.tsx
import React from 'react';
import { Carousel } from '@salutejs/plasma-web';
export const MyGallery = () = (
<Carousel detectActive detectThreshold={0.5} onIndexChange={(index) => console.log(index)}>
// Элементы карусели помещаются здесь
</Carousel>
);