Pill Nav
Навигация с пилюлей, которая скользит между пунктами. Текст под ней перекрашивается точно по краю пилюли, даже на лету.
зависимости 0файлы tsx + cssпараметры 9react 18+
X 0000 Y 0000↳ Наведите на пункты или коснитесь их
Пульт09 параметров
01labels
Только для демо: подписи пунктов.
02size
Размер пунктов.
03followHover
Пилюля показывает пункт под курсором.
04bounce
Небольшой перелёт при остановке.
05duration
ms
Время движения пилюли.
06background
Фон панели.
07pillColor
Цвет пилюли.
08textColor
Цвет текста.
09activeTextColor
Цвет текста под пилюлей.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
labels | string[] | ["Главная","Работы","Библиотека","Обо мне","Контакты"] | Только для демо: подписи пунктов. |
size | 'sm' | 'md' | 'lg' | "md" | Размер пунктов. |
followHover | boolean | true | Пилюля показывает пункт под курсором. |
bounce | boolean | true | Небольшой перелёт при остановке. |
duration | number | 450 | Время движения пилюли. |
background | string | "#141413" | Фон панели. |
pillColor | string | "#b6e24c" | Цвет пилюли. |
textColor | string | "#bdb9ae" | Цвет текста. |
activeTextColor | string | "#0b0d0c" | Цвет текста под пилюлей. |
items | PillNavItem[] | — | { label, href? } — ссылки, если задан href, иначе кнопки. |
defaultActive | number | 0 | Активный пункт при первом рендере. |
onChange | (index: number) => void | — | Вызывается при выборе пункта. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |