UG666

UG666 UI
@ug666/react 文档演示

Drawer 抽屉

Drawer 支持从四个方向滑出，适合侧边操作面板、筛选条件、导航菜单等场景。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from '@ug666/react'

方向演示

支持 left、right、top、bottom 四个滑出方向，点击对应按钮触发。

完整结构

包含 Header、Content、Footer 的完整抽屉结构，适合表单或详情展示。

代码示例

推荐配合 Button 控制 open 状态，通过 onOpenChange 同步关闭事件。

import { useState } from 'react'
import { Button, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from '@ug666/react'

export function FilterDrawer() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>打开抽屉</Button>
      <Drawer open={open} onOpenChange={setOpen} side="right">
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>筛选条件</DrawerTitle>
            <DrawerDescription>选择你想筛选的条件范围。</DrawerDescription>
          </DrawerHeader>
          <div className="flex-1 px-6 py-4 text-sm text-text-secondary">
            这里放置筛选表单内容。
          </div>
          <DrawerFooter>
            <DrawerClose>取消</DrawerClose>
            <Button onClick={() => setOpen(false)}>应用</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  )
}

Props 说明

属性类型默认值说明
openbooleanfalse控制抽屉显示状态。
onOpenChange(open: boolean) => void—状态变更回调，用于控制 open。
side'left' | 'right' | 'top' | 'bottom''right'抽屉滑出方向。
DrawerContent.classNamestring—DrawerContent 的额外样式类名。
DrawerClose.onClick() => void—DrawerClose 的点击回调，默认自动关闭抽屉。