Sheet
Sheet 适合在保留当前页面作为参照的同时处理次要任务。展开方向应配合页面布局，不应只按任务类型决定。
适用场景
- 移动端导航
- 列表的筛选面板
- 保留部分列表作为参考，查看或编辑某一项
简短的确认操作可以使用居中显示的 Dialog。
用法
用法
方向
从左到右的布局中，详情和筛选通常从右侧展开；抽屉代替左侧导航时使用 left。top 和 bottom 更适合不需要占满视口高度的简短内容。
方位
API 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | 面板滑入的方向，设置在 SheetContent 上。 |
closeButtonVisible | boolean | true | 是否显示 SheetContent 的关闭按钮。提供其他关闭控件时可设为 false。 |
asChild | boolean | false | 用于 SheetTrigger 和 SheetClose，子节点必须是 button。 |
open | boolean | — | Sheet 的受控打开状态。 |
onOpenChange | (open: boolean) => void | — | Sheet 打开或关闭时调用。 |
说明
- 默认
side是right。 - 设置
closeButtonVisible={false}会隐藏内置关闭按钮，此时需要提供其他关闭控件。 - 与
Dialog一样，触发器使用asChild时，子节点需要是<button>或Button。
玻璃外观
需要保留下层页面的可见度时，为 SheetContent 设置 appearance="glass"。接入方式和浏览器回退见 液态玻璃。