スライドアニメーション付きタブメニュー
スワイプにも対応しています
目次
背景がヌルっと動くメニューとスワイプ機能付きのスライダーを組み合わせて作ったスライドするアニメーション付きのタブメニューです。
About Preview
このコンポーネントを使いたい場合は、component.tsxとstyle.cssの内容をコピーして、render.tsxを参考にコンポーネントを使ってください
Default Packages
プレビュー画面では以下のパッケージがンストールされています
- TailwindCSS
- framer-motion
- clsx
- tailwind-merge
pnpm add tailwindcss framer-motion clsx tailwind-merge
Component PropsType
interface Menu {
name: string;
icon?: React.FC;
}
interface TabProps {
menu: Menu[];
children: React.ReactNode[];
duration?: number;
color?: string;
className?: string;
}
