在 Tiptap 中添加下拉菜单

一个通过按钮或其他控件触发后出现的菜单，显示一组选项列表。

安装

您可以通过 Tiptap CLI（针对 Vite 或 Next.js）添加该基础组件

npx @tiptap/cli add dropdown-menu

手动集成

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

导入样式

该组件需要您导入我们添加到 styles/keyframe-animation.scss 和 styles/_variables.scss 的样式。

用法

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
} from '@/components/tiptap-ui-primitive/dropdown-menu'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button data-style="ghost">打开菜单</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem asChild>
            <Button data-style="ghost" onClick={() => console.log('Item 1')}>
              菜单项 1
            </Button>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Button data-style="ghost" onClick={() => console.log('Item 2')}>
              菜单项 2
            </Button>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

属性

DropdownMenu

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

DropdownMenuTrigger

名称	类型	默认值	描述
asChild	boolean	false	是否将属性合并到子元素

DropdownMenuContent

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

DropdownMenuItem

名称	类型	默认值	描述
asChild	boolean	false	是否将属性合并到子元素