КомпонентыНовое
Выдвижная панель с меню
Боковая панель выезжает на пружине, а кнопка меню плавно сливается с ней. Панель можно утащить пальцем, закрыть кликом по фону или крестиком.
Настройки
backgroundColor
accentColor
Основано на Motion Drawer (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
15 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Содержимое панели, например меню. |
| width | number | 280 | Ширина панели в пикселях. |
| direction | 'left' | 'right' | "left" | С какой стороны выезжает панель. |
| buttonOpeningVariants | 'merge' | 'push' | 'stay' | "merge" | Как уходит кнопка меню: сливается с панелью, уезжает вместе с ней или гаснет на месте. |
| enableDrag | boolean | true | Панель можно утащить пальцем или мышью, чтобы закрыть. |
| dragThreshold | number | 0.3 | Какую долю ширины нужно протащить, чтобы панель закрылась. |
| backgroundColor | string | "#111111" | Цвет панели. |
| accentColor | string | "#ffffff" | Цвет иконки меню и линии края панели. |
| overlayColor | string | "rgba(0, 0, 0, 0.55)" | Цвет затемнения за панелью. |
| contained | boolean | false | Панель и кнопка встают внутри ближайшего родителя с position: relative, а не поверх всего окна. |
| isOpen | boolean | — | Управляемое состояние: открыта ли панель. |
| onToggle | (isOpen: boolean) => void | — | Вызывается при открытии и закрытии. |
| showToggleButton | boolean | true | Показывать кнопку меню и крестик. |
| animationConfig | { type?, damping?, stiffness?, duration? } | — | Настройки пружины выезда. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 4
npm install motion lucide-react clsx tailwind-merge