Animated List
Прокручиваемый список: пункты выпрыгивают при появлении, есть выбор с клавиатуры и затухание по краям.
зависимости 0файлы tsx + cssпараметры 9react 18+
X 0000 Y 0000↳ Прокрутите, коснитесь или нажимайте ↑ ↓
Пульт09 параметров
01count
Только для демо: число пунктов.
02keyboard
Стрелки двигают, Enter выбирает.
03gradients
Затухание по краям, пока есть что прокручивать.
04showScrollbar
Показывать полосу прокрутки.
05maxHeight
px
Высота области прокрутки.
06itemColor
Фон пункта.
07selectedColor
Фон выбранного пункта.
08fadeColor
Цвет, в который уходят края.
09duration
ms
Время появления.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
count | number | 16 | Только для демо: число пунктов. |
keyboard | boolean | true | Стрелки двигают, Enter выбирает. |
gradients | boolean | true | Затухание по краям, пока есть что прокручивать. |
showScrollbar | boolean | false | Показывать полосу прокрутки. |
maxHeight | number | 380 | Высота области прокрутки. |
itemColor | string | "#1a1a18" | Фон пункта. |
selectedColor | string | "#2a3317" | Фон выбранного пункта. |
fadeColor | string | "#0e0e0d" | Цвет, в который уходят края. |
duration | number | 350 | Время появления. |
items | T[] | — | Что угодно; выводится текстом, если не задан renderItem. |
renderItem | (item, index, selected) => ReactNode | — | Своя разметка пункта. |
onSelect | (item, index) => void | — | Вызывается по клику или Enter. |
initialSelected | number | -1 | Выбранный пункт при первом рендере. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |