@ug666/react 文档演示

Sheet 抽屉

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

导入方式

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

import { Sheet } from '@ug666/react'

变体预览

左侧抽屉与右侧抽屉。

状态展示

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

尺寸展示

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

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

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

代码示例

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

import { useState } from 'react'
import { Button, Sheet } from '@ug666/react'

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

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

Props 说明

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