跳到正文
GitHub

浮层

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 拿到的是同一套。差别只在它停在哪、从哪个方向进来,这也正是它复用那份实现而不是再写一遍的原因:第二个焦点陷阱,就是第二个会出错的焦点陷阱。

标题是必需的,不管可不可见。一个没有可访问名称的模态,会把读屏用户丢进一个没有名字、也没有退路的区域。

SheetContent props
属性类型默认值说明
title必填ReactNode
descriptionReactNode
hideTitlebooleanfalse在视觉上隐藏标题,但为辅助技术保留它。
sideSheetSide'end'停靠在哪条边上。默认 `end`。

同时接受 Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

再导出

Sheet = DialogPrimitive.Root

Radix Dialog 的根节点、触发器和关闭按钮——sheet 就是一个靠边停放的 dialog。

SheetTrigger = DialogPrimitive.Trigger
SheetClose = DialogPrimitive.Close

类型

export type SheetSide = 'start' | 'end' | 'top' | 'bottom'

键盘操作

Sheet keyboard interactions
按键作用
Escape关闭它,焦点回到触发器。
Tab在面板内部循环。

无障碍

  • 复用 Dialog 的焦点陷阱、Escape 与滚动锁定,而不是再实现一遍——第二个焦点陷阱就是第二个会出错的焦点陷阱。
  • 标题必填,无论可不可见。