ТекстНовое
Подчёркивание на ходу
При наведении линия заезжает под ссылку с одной стороны, а когда курсор уходит, уезжает в другую. Простой и аккуратный эффект для навигации.
Настройки
underlineFrom
underlineTo
Основано на Underline Comes In Goes Out (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Текст ссылки. |
| direction | 'left' | 'right' | "left" | С какой стороны заезжает линия. |
| underlineHeightRatio | number | 0.1 | Толщина линии относительно размера шрифта. |
| underlinePaddingRatio | number | 0.01 | Отступ линии от текста относительно размера шрифта. |
| transition | ValueAnimationTransition | "{ duration: 0.4, ease: 'easeInOut' }" | Длительность и плавность движения линии. |
| as | ElementType | "span" | HTML-тег элемента. |
| className | string | — | Дополнительные классы. |
| underlineFrom | string | "#ffffff" | Цвет начала подчёркивания. Дальше он плавно переходит во второй цвет. |
| underlineTo | string | "#a1a1aa" | Цвет конца подчёркивания. |
Зависимости
Пакетов: 2
npm install clsx motion