集成弹出式 UI 组件

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

安装

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

npx @tiptap/cli add popover

手动集成

对于 Vite 或 Next.js 以外的框架，请从开源代码库手动添加该组件。

导入样式

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

使用

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

名称	类型	默认值	描述
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	是否在门户中渲染