---
title: "在 Tiptap 中添加一个间隔 UI 组件"
description: "使用间隔 UI 组件创建布局。有关该 UI 组件的更多信息，请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/spacer"
---

# 在 Tiptap 中添加一个间隔 UI 组件

使用间隔 UI 组件创建布局。有关该 UI 组件的更多信息，请查看我们的文档！

一个用于布局间距的灵活空间组件。

## 安装

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

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

### 手动集成

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

### 导入样式

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

## 用法

```tsx
import { Spacer } from '@/components/tiptap-ui-primitive/spacer'

export default function MyComponent() {
  return (
    <div className="toolbar">
      <button>左侧按钮</button>
      <Spacer />
      <button>右侧按钮</button>
    </div>
  )
}
```