对话框 Dialog

Trigger · Backdrop · Positioner · Content · Title · Description · CloseTrigger

#Backdrop

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

属性	类型	默认值	描述
`aria-label`	`string`		未渲染对话框标题时使用的可读标签
`closeOnEscape`	`boolean`	`true`	按下 Esc 键时是否关闭对话框
`closeOnInteractOutside`	`boolean`	`true`	点击外部时是否关闭对话框
`defaultOpen`	`boolean`	`false`	对话框初始是否打开；无需控制打开状态时使用
`defaultTriggerValue`	`string \| null`		初始触发器值；无需控制触发器值时使用
`finalFocusEl`	`() => HTMLElement \| null`		对话框关闭后聚焦的元素
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }>`		对话框内各元素的 id；便于组合使用
`initialFocusEl`	`() => HTMLElement \| null`		对话框打开后聚焦的元素
`modal`	`boolean`	`true`	是否阻止元素外部的指针交互，并隐藏其下方内容
`open`	`boolean`		对话框的受控打开状态
`persistentElements`	`(() => Element \| null)[]`		返回不应禁用 pointer-events、也不应触发关闭事件的常驻元素
`preventScroll`	`boolean`	`true`	对话框打开时是否阻止背后的页面滚动
`restoreFocus`	`boolean`		是否把焦点恢复到对话框打开前聚焦的元素
`role`	`'dialog' \| 'alertdialog'`	`"dialog"`	对话框的 role
`trapFocus`	`boolean`	`true`	对话框打开时是否把焦点限制在内部
`triggerValue`	`string \| null`		当前打开对话框的触发器值

事件	载荷
`exitComplete`	`—`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`triggerValueChange`	`details: TriggerValueChangeDetails`
`update:triggerValue`	`triggerValue: string \| null`
`focusOutside`	`event: FocusOutsideEvent`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`escapeKeyDown`	`event: KeyboardEvent`
`requestDismiss`	`event: CustomEvent<{ originalLayer: HTMLElement; targetLayer: HTMLElement \| undefined; originalIndex: number; targetIndex: number; }>`

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

属性	类型	默认值	描述
`value`	`string`		触发器的标识值