React 组件

UGSheet 抽屉

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

导入方式

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

tsx

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

变体预览

左侧抽屉与右侧抽屉。

状态展示

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

三种尺寸

宽度由 size 管理；面板边界、正文滚动和底部操作区保持同一 Anatomy。

代码示例

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

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>
    </>
  )
}

属性

属性	类型	默认值	说明
open	boolean	false	控制抽屉显示状态。
onClose	() => void	—	点击遮罩或按下 ESC 时触发。
side	'left' \| 'right'	'right'	设置抽屉滑出方向。
size	'sm' \| 'md' \| 'lg'	'md'	设置面板宽度；移动端始终限制在视口内。
title	string	—	抽屉标题栏文本。
closeOnOverlay	boolean	true	点击遮罩时是否关闭。
closeOnEsc	boolean	true	按下 ESC 时是否关闭。
showCloseButton	boolean	true	是否显示内置且具有可访问名称的关闭按钮。
footer	ReactNode	—	固定在面板底部的操作区，自动提供边界、间距与换行。