---
title: "集成弹出式 UI 组件"
description: "添加一个在用户点击触发元素时显示的弹出式 UI 元素。更多内容见文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/popover"
---

# 集成弹出式 UI 组件

添加一个在用户点击触发元素时显示的弹出式 UI 元素。更多内容见文档！

一个在用户点击触发元素时出现的弹出式元素。

> **Interactive demo:** [popover](https://template.tiptap.dev/preview/tiptap-ui-primitive/popover)

## 安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加该组件。

```bash
npx @tiptap/cli@latest add popover
```

### 手动集成

对于 Vite 或 Next.js 以外的框架，请从 [开源代码库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-ui-primitive/popover) 手动添加该组件。

### 导入样式

此组件要求您导入我们的样式，这些样式已添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss` 中。

## 使用

```tsx
import { Popover, PopoverTrigger, PopoverContent } from '@/components/tiptap-ui-primitive/popover'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button data-style="ghost">打开弹出式</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>弹出内容在这里</p>
      </PopoverContent>
    </Popover>
  )
}
```

## Props

### Popover

| 名称           | 类型                      | 默认值       | 描述          |
| ------------ | ----------------------- | --------- | ----------- |
| open         | boolean                 | undefined | 控制打开状态      |
| onOpenChange | (open: boolean) => void | undefined | 打开状态变化时的回调  |
| defaultOpen  | boolean                 | false     | 默认打开状态      |
| modal        | boolean                 | false     | 是否在模态上下文中渲染 |

### PopoverTrigger

| 名称      | 类型      | 默认值   | 描述             |
| ------- | ------- | ----- | -------------- |
| asChild | boolean | false | 是否与子组件合并 props |

### PopoverContent

| 名称     | 类型                                     | 默认值      | 描述        |
| ------ | -------------------------------------- | -------- | --------- |
| side   | 'top' \| 'right' \| 'bottom' \| 'left' | 'bottom' | 显示内容的首选侧面 |
| align  | 'start' \| 'center' \| 'end'           | 'center' | 沿边缘的对齐    |
| portal | boolean                                | true     | 是否在门户中渲染  |