React 组件

UGDrawer 抽屉

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGDrawer, UGDrawerContent, UGDrawerHeader, UGDrawerTitle, UGDrawerDescription, UGDrawerFooter, UGDrawerClose } from '@ug666/ui-react'

方向演示

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

完整结构

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

代码示例

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

tsx

import { useState } from 'react'
import { UGButton, UGDrawer, UGDrawerContent, UGDrawerHeader, UGDrawerTitle, UGDrawerDescription, UGDrawerFooter, UGDrawerClose } from '@ug666/ui-react'

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

  return (
    <>
      <UGButton onClick={() => setOpen(true)}>打开抽屉</UGButton>
      <UGDrawer open={open} onOpenChange={setOpen} side="right">
        <UGDrawerContent>
          <UGDrawerHeader>
            <UGDrawerTitle>筛选条件</UGDrawerTitle>
            <UGDrawerDescription>选择你想筛选的条件范围。</UGDrawerDescription>
          </UGDrawerHeader>
          <div className="flex-1 px-6 py-4 text-sm text-text-secondary">
            这里放置筛选表单内容。
          </div>
          <UGDrawerFooter>
            <UGDrawerClose>取消</UGDrawerClose>
            <UGButton onClick={() => setOpen(false)}>应用</UGButton>
          </UGDrawerFooter>
        </UGDrawerContent>
      </UGDrawer>
    </>
  )
}

Props

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