气泡卡片 Popover

Arrow · ArrowTip · Anchor · Trigger · Indicator · Positioner · Content · Title · Description · CloseTrigger

#Anchor

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

#ArrowTip

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

#Arrow

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

#CloseTrigger

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

#Content

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

#Description

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

#Indicator

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

#Positioner

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

#Root

属性	类型	默认值	描述
`autoFocus`	`boolean`	`true`	打开 popover 时是否自动聚焦第一个可聚焦内容
`closeOnEscape`	`boolean`	`true`	按 Escape 时是否关闭 popover
`closeOnInteractOutside`	`boolean`	`true`	点击 popover 外部时是否关闭 popover
`defaultOpen`	`boolean`		popover 渲染时的初始打开状态；不需要控制打开状态时使用
`defaultTriggerValue`	`string \| null`		触发器的初始值；不需要控制触发器值时使用
`finalFocusEl`	`() => HTMLElement \| null`		popover 关闭时接收焦点的元素
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }>`		popover 各元素的 id，适合组合使用
`initialFocusEl`	`() => HTMLElement \| null`		popover 打开时聚焦的元素
`modal`	`boolean`	`false`	popover 是否为模态；为 `true` 时外部元素不可交互，屏幕阅读器只能看到 popover 内容，滚动被阻止，焦点限制在 popover 内
`open`	`boolean`		popover 的受控打开状态
`persistentElements`	`(() => Element \| null)[]`		返回常驻元素；这些元素保持 `pointer-events` 可用，也不触发关闭事件
`portalled`	`boolean`	`true`	popover 是否通过 portal 渲染；无论内容的 DOM 位置如何，Tab 行为都由 portal 代理
`positioning`	`popover.PositioningOptions`		popover 内容的定位选项
`restoreFocus`	`boolean`	`true`	popover 关闭后是否把焦点还给打开前聚焦的元素
`translations`	`popover.IntlTranslations`		无障碍元素及其状态的本地化文案
`triggerValue`	`string \| null`		当前打开 popover 的触发器值

事件	载荷
`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; }>`

#Title

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

#Trigger

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