КомпонентыНовое
Вкладки-иконки
Ряд иконок. Выбранная вкладка плавно расширяется и выдвигает своё название, остальные остаются компактными.
Настройки
accentColor
secondaryColor
glowColor
Основано на Icon Tabs (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| tabs | { title: string; icon: ReactNode }[] | — | Вкладки: название и иконка. |
| defaultIndex | number | 0 | Какая вкладка выбрана сразу, счёт с нуля. |
| center | boolean | false | Выровнять ряд по центру. |
| duration | number | 0.35 | Длительность раскрытия в секундах. |
| onChange | (index: number) => void | — | Вызывается с номером выбранной вкладки. |
| accentColor | string | "#ffffff" | Основной цвет: иконка и подсветка выбранной вкладки. |
| secondaryColor | string | "#a3a3a3" | Второй цвет: им заканчивается подсветка выбранной вкладки. |
| glowColor | string | "rgba(255, 255, 255, 0.18)" | Мягкое свечение вокруг выбранной вкладки. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge