用于弹出卡片场景的 MoriUI 组件。

导入

import { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from 'moriui'

示例

概览

Popover 的基本结构与标题、说明。

<script setup lang="ts">
  import {
    Button,
    Popover,
    PopoverContent,
    PopoverDescription,
    PopoverHeader,
    PopoverTitle,
    PopoverTrigger
  } from 'moriui'
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button variant="outline">
        打开 Popover
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-80">
      <PopoverHeader>
        <PopoverTitle>标题</PopoverTitle>
        <PopoverDescription>这是一段 Popover 描述文本。</PopoverDescription>
      </PopoverHeader>
    </PopoverContent>
  </Popover>
</template>

表单

在 Popover 中放置表单字段。

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    Button,
    Input,
    Label,
    Popover,
    PopoverContent,
    PopoverDescription,
    PopoverHeader,
    PopoverTitle,
    PopoverTrigger
  } from 'moriui'

  const width = ref('100%')
  const height = ref('25px')
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button variant="outline">
        尺寸设置
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-80">
      <PopoverHeader>
        <PopoverTitle>尺寸</PopoverTitle>
        <PopoverDescription>设置图层的宽高尺寸。</PopoverDescription>
      </PopoverHeader>
      <div class="grid gap-3">
        <div class="grid grid-cols-3 items-center gap-4">
          <Label for="width">宽度</Label>
          <Input id="width" v-model="width" class="col-span-2 h-8" />
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <Label for="height">高度</Label>
          <Input id="height" v-model="height" class="col-span-2 h-8" />
        </div>
      </div>
    </PopoverContent>
  </Popover>
</template>

对齐

使用 align 控制内容对齐方向。

<script setup lang="ts">
  import { Button, Popover, PopoverContent, PopoverTrigger } from 'moriui'
</script>

<template>
  <div class="flex flex-wrap gap-6">
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" size="sm">
          Start
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" class="w-36">
        对齐到 start
      </PopoverContent>
    </Popover>
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" size="sm">
          Center
        </Button>
      </PopoverTrigger>
      <PopoverContent align="center" class="w-36">
        对齐到 center
      </PopoverContent>
    </Popover>
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" size="sm">
          End
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" class="w-36">
        对齐到 end
      </PopoverContent>
    </Popover>
  </div>
</template>

RTL

从右到左的弹出卡片布局。

<script setup lang="ts">
  import {
    Button,
    DirectionProvider,
    Popover,
    PopoverContent,
    PopoverDescription,
    PopoverHeader,
    PopoverTitle,
    PopoverTrigger
  } from 'moriui'
</script>

<template>
  <DirectionProvider direction="rtl">
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline">
          افتح القائمة
        </Button>
      </PopoverTrigger>
      <PopoverContent class="w-72">
        <PopoverHeader>
          <PopoverTitle>العنوان</PopoverTitle>
          <PopoverDescription>نص الوصف هنا.</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  </DirectionProvider>
</template>

使用说明

组合方式

Popover 由 Trigger、Content 组成；Content 内可使用 Header、Title 与 Description 提供清晰结构。

定位

Content 的 align 与 side 控制弹出卡片的方向和对齐。

RTL

方向由 DirectionProvider 控制。

变体

PopoverContent 的 align 与 side 来自 Reka Popper 定位。

可访问性

Popover 复用 Reka UI 的 Popper 定位、焦点管理、Escape 关闭与 DismissableLayer。Content 内应提供 PopoverTitle，并在需要时补充 PopoverDescription。

API 参考

属性	类型	默认值	说明
`Popover v-model:open`	`boolean`	`undefined`	弹出卡的受控打开状态。
`Popover defaultOpen`	`boolean`	`false`	非受控初始打开状态。
`Popover modal`	`boolean`	`true`	弹出卡打开时是否阻断背景交互。
`PopoverContent side / align`	`PopperContentProps`	`'bottom' / 'center'`	卡片方向与对齐。
`PopoverContent sideOffset`	`number`	`4`	卡片与触发器的偏移像素。
`PopoverHeader class`	`HTMLAttributes["class"]`	`undefined`	合并到卡片头部的调用方类。
`PopoverAnchor as / asChild`	`string \| Component / boolean`	`'div' / false`	自定义锚点的元素组合能力。

Popover 弹出卡片