R
布局与内容FamilyDrawerVaul视图形变高度自适应

家族抽屉

底部抽屉，内部多个视图之间平滑地形变切换，灵感来自 Family 应用，基于 Vaul。

点击按钮打开抽屉，再在内部的多个视图之间来回切换。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/family-drawer.tsx。

npx shadcn@latest add swamimalode07/rare-ui/family-drawer

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

family-drawer.tsx
import FamilyDrawer from "@/components/ui/family-drawer"


export default function Page() {
  return <FamilyDrawer />
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
—无属性—抽屉自带触发按钮与全部视图状态，直接挂载即可使用。