Примеры: каждый паттерн живьём, с полным исходником
Каждый пример — это работающая демонстрация опубликованного npm-пакета плюс полный файл за ней: готово к копированию и редактируется вживую в Storybook. Рендерится на сервере, как и всё остальное на этом сайте.
Основы
- Начало работыМинимальное меню: элементы, две стрелки, видимость из коробки.
- Один элемент на экранМеню шириной в один элемент — одна карточка заполняет ряд.
- Прокрутка по одному элементуСтрелки продвигают один элемент вместо целой страницы.
- Стрелки под менюСтрелки — ваши компоненты, размещайте их где угодно.
Позиция и прокрутка
- Центрировать кликнутый элементscrollToItem с inline: center — паттерн прокручиваемых вкладок.
- Прокрутить к элементу по idДоберитесь до меню извне с помощью apiRef.
- Сохранение и восстановление позиции прокруткиСохраняйте смещение прокрутки между размонтированиями и перезагрузками.
- Кастомная анимация прокруткиСвой easing и длительность для программной прокрутки.
- Индикатор прогресса прокруткиПолоса прогресса, управляемая тем, какие элементы видны.
Ввод и жесты
- Прокрутка перетаскиванием мышьюПеретаскивание мышью, которое не ломает клики по элементам.
- Свайп на десктопеСвайп с инерцией для пользователей мыши.
- Скрыть стрелки на мобильныхНа малых экранах — только сенсорная прокрутка, на десктопе — стрелки.
- Заблокировать прокрутку страницыКолесо над меню прокручивает меню, а не страницу.
Динамические элементы
- Подгружать, когда виден конецБесконечное добавление, управляемое видимостью последнего элемента.
- Добавить элемент и прокрутить к немуПаттерн чипов-фильтров: добавить, затем привести в видимость.
- Анимация появления и исчезновения элементовАнимации добавления/удаления с @formkit/auto-animate.
- 5000 элементов — и всё равно быстроНативная прокрутка масштабируется — виртуализация не нужна.