气泡卡片 Popover

#基础用法

popover/basic.vue

<script setup lang="ts">
import { x } from "@bysages/icons";
import { Icon, Popover } from "@bysages/vue";
</script>

<template>
  <Popover.Root>
    <Popover.Trigger>Notes</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.CloseTrigger>
          <Icon :glyph="x" />
        </Popover.CloseTrigger>
        <Popover.Title>Reading notes</Popover.Title>
        <Popover.Description>
          Marginalia stay on the paper: this vessel pins to its trigger and dissolves in on
          elevation.
        </Popover.Description>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

#属性

#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 的触发器值

#Title

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

#Trigger

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