---
title: "在 Tiptap 中添加分隔符"
description: "在菜单、工具栏或其他 UI 元素之间添加视觉分隔线。详细信息见文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/separator"
---

# 在 Tiptap 中添加分隔符

在菜单、工具栏或其他 UI 元素之间添加视觉分隔线。详细信息见文档！

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

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

## 安装

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

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

### 手动集成

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

### 导入样式

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

## 使用方法

```tsx
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' | 分隔符的方向 |