React 组件

UGSheet 抽屉

UGSheet 用于承载补充信息、筛选条件和不打断主流程的侧边操作。

导入方式

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

tsx

import { UGSheet } from '@ug666/ui-react'

变体预览

左侧抽屉与右侧抽屉。

状态展示

UGSheet 通常配合打开、关闭和只读摘要状态使用。

尺寸展示

当前组件默认宽度为 20rem，可通过 className 扩展。

标准抽屉：适合筛选表单。

可通过 className 自定义更宽的详情抽屉。

代码示例

适合在不离开当前页面的前提下展示补充上下文。

tsx

import { useState } from 'react'
import { UGButton, UGSheet } from '@ug666/ui-react'

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

  return (
    <>
      <UGButton onClick={() => setOpen(true)}>打开筛选</UGButton>
      <UGSheet open={open} onClose={() => setOpen(false)} side="right" title="筛选条件">
        <p className="text-sm text-text-secondary">这里放置筛选表单。</p>
      </UGSheet>
    </>
  )
}

Props

属性	类型	默认值	说明
open	boolean	false	控制抽屉显示状态。
onClose	() => void	—	点击遮罩或按下 ESC 时触发。
side	'left' \| 'right'	'right'	设置抽屉滑出方向。
title	string	—	抽屉标题栏文本。