Обзор
IndexedSnapScroller наследует контракт стилизации от SnapScroller и SnapScrollerContent. Собственного локального CSS у него нет, поэтому большинство решений по стилям принимается на уровне базового скроллера или отрендеренного содержимого страниц.
Публичные CSS-переменные
В текущей реализации нет отдельных локальных CSS-переменных компонента.
Общие рекомендации по темам — в разделах Темы и CSS-переменные.
Переменные на уровне частей
Корень
Использует контейнер прокрутки с привязкой SnapScroller и его поведение прокрутки, промежутков и привязки.
Содержимое
Использует поведение SnapScrollerContent через IndexedSnapScrollerContent.
Любая визуальная оболочка внутри страницы по-прежнему относится к отрендеренному дочернему поддереву, а не к самому IndexedSnapScroller.
Взаимодействие состояний и вариантов
- Стилизация структурная и наследуется от базового скроллера с привязкой.
- Поведение с индексами меняет идентичность содержимого и пролистывание, но не визуальный контракт.
preserveScroll,sizeиshiftвлияют на поведение пролистывания, а не открывают новые дизайн-токены.
Примеры
Три страницы в области просмотра
Каждая страница занимает треть области просмотра за вычетом промежутков. Когда видно сразу несколько страниц, увеличьте size, чтобы окно всегда выходило за видимые страницы с обеих сторон.
import {
IndexedSnapScroller,
IndexedSnapScrollerContent,
Text,
useIndexedSnapScrollerContext,
} from '@vega-ui/react';
const today = new Date();
const dayFormat = new Intl.DateTimeFormat('en-US', { weekday: 'short', day: 'numeric' });
function ForecastDay() {
const { index } = useIndexedSnapScrollerContext();Что не переопределять
- не придумывайте CSS-API скроллера с индексами, которого нет в исходном коде
- не делайте компонент визуально отличным от базового скроллера без продуктовой необходимости