Staggered Menu
Меню на всю высоту: цветные слои въезжают один за другим, затем поднимаются пункты. Закрывается по Esc.
зависимости 0файлы tsx + cssпараметры 9react 18+
X 0000 Y 0000↳ Нажмите «Меню»
Пульт09 параметров
01labels
Только для демо: подписи пунктов.
02position
С какой стороны открывается.
03layerColors
Слои, которые въезжают перед панелью.
04panelColor
Фон панели.
05textColor
Цвет пунктов.
06accentColor
Цвет номеров, наведения и кнопки.
07numbering
Показывать 01, 02… рядом с пунктами.
08duration
ms
Время выезда одного слоя.
09stagger
ms
Задержка между слоями и пунктами.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
labels | string[] | ["Главная","Работы","Библиотека","Обо мне","Контакты"] | Только для демо: подписи пунктов. |
position | 'left' | 'right' | "right" | С какой стороны открывается. |
layerColors | string[] | ["#1a2113","#b6e24c"] | Слои, которые въезжают перед панелью. |
panelColor | string | "#0e0e0d" | Фон панели. |
textColor | string | "#edeae3" | Цвет пунктов. |
accentColor | string | "#b6e24c" | Цвет номеров, наведения и кнопки. |
numbering | boolean | true | Показывать 01, 02… рядом с пунктами. |
duration | number | 650 | Время выезда одного слоя. |
stagger | number | 70 | Задержка между слоями и пунктами. |
items | StaggeredMenuItem[] | — | { label, href? } для каждого пункта. |
footerLinks | StaggeredMenuItem[] | — | Мелкие ссылки под пунктами. |
fixed | boolean | true | На весь экран; false — на ближайшего позиционированного родителя. |
closeOnItemClick | boolean | true | Закрывать после выбора пункта. |
menuLabel / closeLabel | string | 'Menu' / 'Close' | Текст кнопки в закрытом и открытом состоянии. |
onOpenChange | (open: boolean) => void | — | Вызывается при открытии и закрытии. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |