在 Tiptap 中添加分隔符

在菜单、工具栏或其他 UI 元素之间的视觉分隔线。

安装

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

npx @tiptap/cli add separator

手动集成

对于除 Vite 或 Next.js 之外的框架，请从开源代码库手动添加此基本组件。

导入样式

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

使用方法

import { Separator } from '@/components/tiptap-ui-primitive/separator'

export default function MyComponent() {
  return (
    <div className="tiptap-tools">
      <button>按钮 1</button>
      <Separator />
      <button>按钮 2</button>
    </div>
  )
}

属性

分隔符

名称	类型	默认值	描述
orientation	'horizontal' \| 'vertical'	'horizontal'	分隔符的方向