浮层组件

Drawer 抽屉

从屏幕边缘滑入的抽屉面板，基于 Vaul 实现，支持底部、顶部、左侧、右侧四个方向，内置拖拽关闭手势。

安装

bash

npx polyui add drawer

基础用法

默认从底部滑入，使用 DrawerTrigger 触发，DrawerContent 包含内容，DrawerClose 关闭。

tsx

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@polyui/react/drawer"
import { Button } from "@polyui/react/button"

export function DrawerExample() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">打开抽屉</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>编辑个人资料</DrawerTitle>
          <DrawerDescription>
            在此处更改您的个人资料。
          </DrawerDescription>
        </DrawerHeader>
        <div className="px-4 py-2">
          {/* content */}
        </div>
        <DrawerFooter>
          <Button>保存更改</Button>
          <DrawerClose asChild>
            <Button variant="outline">取消</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

滑入方向

通过 direction prop 控制抽屉从哪个方向滑入，支持 bottom、top、left、right。

tsx

<Drawer direction="right">
  <DrawerTrigger asChild>
    <Button>向右打开</Button>
  </DrawerTrigger>
  <DrawerContent>
    {/* content */}
  </DrawerContent>
</Drawer>

基础

Basic

tsx

export function DrawerBasicDemo() {
  return (
    <div className="flex flex-col gap-3">
      <p className="text-xs font-mono text-muted-foreground tracking-widest uppercase">Basic</p>
      <div className="flex flex-wrap gap-3">
        <DrawerBasic />
      </div>
    </div>
  )
}

方向

Directions

tsx

export function DrawerDirections() {
  return (
    <div className="flex flex-col gap-3">
      <p className="text-xs font-mono text-muted-foreground tracking-widest uppercase">Directions</p>
      <div className="flex flex-wrap gap-3">
        <DrawerBasic />
        <DrawerRight />
        <DrawerTop />
        <DrawerLeft />
      </div>
    </div>
  )
}

属性

属性	类型	默认值	说明
`Drawer › direction`	`"bottom" \| "top" \| "left" \| "right"`	`"bottom"`	抽屉滑入的方向。
`Drawer › open`	`boolean`	`—`	受控模式下的开关状态。
`Drawer › onOpenChange`	`(open: boolean) => void`	`—`	受控模式下状态变化的回调。
`Drawer › shouldScaleBackground`	`boolean`	`false`	打开时是否缩放背景内容（仅 bottom/top 方向）。