КомпонентыНовое
Вкладки со скользящим указателем
Текстовые вкладки, под которыми указатель плавно переезжает к выбранной. Два вида: полоска снизу или белая капсула за текстом.
Настройки
accentColor
secondaryColor
glowColor
Основано на Line Tabs (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
11 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| tabs | string[] | — | Названия вкладок. |
| defaultValue | string | — | Какая вкладка выбрана сразу. По умолчанию первая. |
| variant | 'line' | 'pill' | "line" | Вид указателя: полоска под текстом или заливка-капсула. |
| center | boolean | false | Выровнять ряд по центру. |
| duration | number | 0.4 | Длительность перехода указателя в секундах. |
| bounce | number | 0 | Пружинистость указателя. Ноль без отскока. |
| onChange | (tab: string) => void | — | Вызывается с выбранной вкладкой. |
| accentColor | string | "#ffffff" | Основной цвет: заливка таблетки или начало линии. Текст на таблетке сам станет тёмным или белым. |
| secondaryColor | string | "#a3a3a3" | Второй цвет: им заканчивается градиент линии. |
| glowColor | string | "rgba(255, 255, 255, 0.3)" | Мягкое свечение под индикатором. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge