Обзор
Стили SnapScroller в основном структурные: раскладка контейнера прокрутки, поведение привязки и скрытые полосы прокрутки. SnapScrollerContent добавляет выравнивание привязки и поведение сжатия.
Публичные CSS-переменные
В текущей реализации нет локальных CSS-переменных компонента.
Переменные частей
Корень
Корень использует flex-раскладку, scroll-snap-type: x mandatory, плавную прокрутку и скрытые полосы прокрутки.
Содержимое
Каждый элемент содержимого использует scroll-snap-align: start, scroll-snap-stop: always и flex-shrink: 0.
Взаимодействие состояний и вариантов
- Встроенных визуальных вариантов нет.
- Поведение раскладки зависит от ширины контейнера, промежутка и ширины каждого элемента содержимого.
Примеры
Выглядывающая следующая карточка
Карточки уже области просмотра, поэтому следующая выглядывает из-за края. paddingInline на скроллере задаёт отступ ряда, а такой же scrollPaddingInline выравнивает привязку по этому отступу; хук привязки учитывает scroll padding, поэтому зафиксированный индекс остаётся верным.
peek-next-card.tsx · 42 строки
import { Heading, SnapScroller, SnapScrollerContent, Text } from '@vega-ui/react';
import type { CSSProperties } from 'react';
const articles = [
{ title: 'Migrating to v3', minutes: 6 },
{ title: 'Theming with tokens', minutes: 4 },
{ title: 'Building a date range form', minutes: 9 },
{ title: 'Testing overlays in the browser', minutes: 7 },
];
const cardStyle: CSSProperties = {
display: 'grid',Не переопределяйте
- не меняйте выравнивание привязки мимоходом, не перепроверив поведение навигации
- не полагайтесь на нестабильную ширину элементов, если нужна точная привязка