Popover

基于 reka-ui 的浮动面板。@tripo3d/design 封装了 Popover(PopoverRoot 别名)、PopoverContent(内置 Portal + 动画 + 默认样式)与 PopoverTitle(右上角自带关闭图标),同时透传了 PopoverTrigger / PopoverPortal / PopoverClose 等原生子组件——全部从 @tripo3d/design 统一导入即可。

Anatomy

• Popover浮动面板根(reka-ui PopoverRoot 别名),维护 open 状态
  • PopoverTrigger触发器,支持 as-child
  • PopoverContent面板容器,已内置 PopoverPortal、动画与默认样式
  • PopoverTitle面板标题,右侧自带关闭图标 (i-tripo:close)

基本用法

默认面板

PopoverContent 已经内置 Portal,无需手动包裹。

<script setup lang="ts">
import { Popover, PopoverContent, PopoverTrigger } from '@tripo3d/design';
</script>

<template>
  <Popover>
    <PopoverTrigger>打开面板</PopoverTrigger>
    <PopoverContent class="p-4 w-72">
      <p>这是一个基础 Popover 内容。</p>
    </PopoverContent>
  </Popover>
</template>

带标题与关闭按钮

PopoverTitle

右上角自带基于 PopoverClose 的关闭图标。

<script setup lang="ts">
import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@tripo3d/design';
</script>

<template>
  <Popover>
    <PopoverTrigger>设置</PopoverTrigger>
    <PopoverContent class="p-4 w-72">
      <PopoverTitle>面板标题</PopoverTitle>
      <p>通过右上角按钮或点击外部关闭。</p>
    </PopoverContent>
  </Popover>
</template>

不同方向

side + sideOffset

side 决定对齐方向,sideOffset 默认为 12。

<Popover>
  <PopoverTrigger>上</PopoverTrigger>
  <PopoverContent side="top" :side-offset="8">
    上方弹出
  </PopoverContent>
</Popover>

API

Popover Props

名称	类型	默认值	说明
open	boolean	—	受控开关状态
defaultOpen	boolean	—	非受控初始状态
modal	boolean	false	是否拦截背景交互

其余 props 透传至 reka-ui PopoverRoot。

Popover Events

事件	Payload	说明
update:open	(open: boolean)	开关状态变化

PopoverContent Props

名称	类型	默认值	说明
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	面板相对于触发器的方向
sideOffset	number	12	与触发器之间的主轴间距
align	'start' | 'center' | 'end'	'center'	次轴对齐方式
avoidCollisions	boolean	true	是否自动避让视口边界
class	string	—	面板额外 class

其余 props 透传至 reka-ui PopoverContentProps。

PopoverTitle Props

名称	类型	默认值	说明
class	string	—	容器 class

Slots

插槽	作用域	说明
default (Popover)	—	通常包含 Trigger 与 Content
default (PopoverContent)	—	面板内容
default (PopoverTitle)	—	标题文本(关闭按钮由组件内部渲染)

可访问性

• 基于 reka-ui,自动管理焦点陷阱与键盘导航(Esc 关闭、外部点击关闭)
• modal=true 会锁定背景滚动并拦截背景交互
• PopoverTitle 的关闭按钮使用 reka-ui PopoverClose,天然支持键盘触发