Card Nav
Компактная шапка, которая раскрывается в карточки разделов и ссылок, — меню, в котором есть место для структуры.
зависимости 0файлы tsx + cssпараметры 8react 18+
X 0000 Y 0000↳ Откройте бургер
Пульт08 параметров
01ctaLabel
Кнопка справа; пусто — скрыть.
02barColor
Фон панели.
03textColor
Цвет текста панели.
04ctaColor
Цвет кнопки.
05ctaTextColor
Цвет текста кнопки.
06duration
ms
Время открытия и закрытия.
07stagger
ms
Задержка между карточками.
08radius
px
Скругление углов.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
ctaLabel | string | "Начать" | Кнопка справа; пусто — скрыть. |
barColor | string | "#141413" | Фон панели. |
textColor | string | "#edeae3" | Цвет текста панели. |
ctaColor | string | "#b6e24c" | Цвет кнопки. |
ctaTextColor | string | "#0b0d0c" | Цвет текста кнопки. |
duration | number | 550 | Время открытия и закрытия. |
stagger | number | 70 | Задержка между карточками. |
radius | number | 18 | Скругление углов. |
logo | ReactNode | — | Показывается в центре панели. |
cards | CardNavCard[] | — | { title, links: { label, href? }[], background?, color? } для каждой карточки. |
ctaHref | string | — | Делает кнопку ссылкой. |
labels | { open?, close? } | — | Текст бургера для скринридеров — для других языков. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |