操作与浮层@neumorphism-ui/drawer

Drawer

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

@neumorphism-ui/drawer

Registry JSON

预览

安装

npx shadcn@latest add @neumorphism-ui/drawer

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

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

Import

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

Example

export default function Example() {
  return <Drawer swipeDirection="down">
    <DrawerTrigger render={<Button />}>快捷设置</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>快捷设置</DrawerTitle>
        <DrawerDescription>无需离开当前页面即可调整常用选项。</DrawerDescription>
      </DrawerHeader>
      <div className="grid gap-3 px-5 py-4"><p>通知和显示控件可以放在此区域。</p></div>
      <DrawerFooter><DrawerClose render={<Button variant="primary" />}>完成</DrawerClose></DrawerFooter>
    </DrawerContent>
  </Drawer>;
}

API 参考

组件	属性	类型	默认值	说明
`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`	`—`	在保留方向和手势行为的同时扩展面板样式。

预览

安装

用法

Import

Example

API 参考

无障碍