浮层
Sheet
停靠在视口某一边的面板。
什么时候用它
需要空间的模态——筛选面板、详情视图。它本身就是一个 Dialog,只是靠边;边名按阅读顺序取,所以 end 在英文里是右、在阿拉伯语里是左。
示例
sides
说明
Radix Dialog 的根节点、触发器和关闭按钮——sheet 就是一个靠边停放的 dialog。
属性
这个组件没有自己的属性。
组成部分
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
SheetContent
停靠在视口某一边的面板。
它是一个模态对话框——Radix 的那个,所以焦点陷阱、Escape 键、滚动锁定和 aria-modal 的接线,和 Dialog 拿到的是同一套。差别只在它停在哪、从哪个方向进来,这也正是它复用那份实现而不是再写一遍的原因:第二个焦点陷阱,就是第二个会出错的焦点陷阱。
标题是必需的,不管可不可见。一个没有可访问名称的模态,会把读屏用户丢进一个没有名字、也没有退路的区域。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title必填 | ReactNode | — | |
| description | ReactNode | — | |
| hideTitle | boolean | false | 在视觉上隐藏标题,但为辅助技术保留它。 |
| side | SheetSide | 'end' | 停靠在哪条边上。默认 `end`。 |
同时接受 Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
再导出
Sheet = DialogPrimitive.RootRadix Dialog 的根节点、触发器和关闭按钮——sheet 就是一个靠边停放的 dialog。
SheetTrigger = DialogPrimitive.TriggerSheetClose = DialogPrimitive.Close类型
export type SheetSide = 'start' | 'end' | 'top' | 'bottom'键盘操作
| 按键 | 作用 |
|---|---|
| Escape | 关闭它,焦点回到触发器。 |
| Tab | 在面板内部循环。 |
无障碍
- 复用 Dialog 的焦点陷阱、Escape 与滚动锁定,而不是再实现一遍——第二个焦点陷阱就是第二个会出错的焦点陷阱。
- 标题必填,无论可不可见。