Drawer

用于可通过滑动关闭的临时任务面板，尤其适合触屏。

预览

个人资料设置抽屉

打开带说明和关闭按钮的个人资料面板，或向下滑动关闭。

正在加载预览。

安装

npx shadcn@latest add @neumorphism-ui/drawer

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

个人资料设置抽屉

npx shadcn@latest add @neumorphism-ui/drawer @neumorphism-ui/button

Registry JSON

用法

在 Drawer 中组合触发器、内容、头部、标题和说明。通过 swipeDirection 指定方向，并在手势之外提供明确的关闭按钮。

"use client";

import { Button } from "@/components/ui/button";
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";

export default function Example() {
  return (
    <Drawer swipeDirection="down">
      <DrawerTrigger render={<Button />}>Quick settings</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Quick settings</DrawerTitle>
          <DrawerDescription>Adjust options without leaving this page.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter><DrawerClose render={<Button />}>Done</DrawerClose></DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

API 参考

使用 Base UI Drawer 的手势和焦点管理。Sheet 适合固定任务面板，而 Drawer 更适合可滑动关闭或从不同方向打开的临时触控界面。

组件	属性	类型	默认值	说明
`Drawer`	`swipeDirection`	`"down" \| "up" \| "left" \| "right"`	`"down"`	设置打开、关闭和滑动方向。
`Drawer`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	控制 Drawer 的打开状态。
`Drawer`	`snapPoints`	`number[]`	`—`	按需配置中间停靠点。
`DrawerTrigger`	`render`	`ReactElement`	`—`	将现有 Button 或其他元素组合为触发器。
`DrawerContent`	`className`	`string \| (state) => string`	`—`	在保留方向和手势行为的同时扩展面板样式。

预览

个人资料设置抽屉

安装

用法

API 参考

无障碍