---
title: "将工具栏 UI 组件添加到 Tiptap"
description: "在水平或垂直容器中组织操作和控件。详见文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/toolbar"
---

# 将工具栏 UI 组件添加到 Tiptap

在水平或垂直容器中组织操作和控件。详见文档！

一个用于在水平或垂直布局中组织操作和控件的容器。

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

## 安装

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

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

### 手动集成

对于 Vite 或 Next.js 之外的框架，可以从 [开源库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-ui-primitive/toolbar) 手动添加该原语。

### 导入样式

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

## 用法

```tsx
import { Toolbar, ToolbarGroup, ToolbarSeparator } from '@/components/tiptap-ui-primitive/toolbar'
import { Button } from '@/components/tiptap-ui-primitive/button'
import { BoldIcon } from '@/components/icons/bold-icon'
import { ItalicIcon } from '@/components/icons/italic-icon'
import { Spacer } from '@/components/tiptap-ui-primitive/spacer'

export default function MyComponent() {
  return (
    <Toolbar variant="default">
      <ToolbarGroup>
        <Button data-style="ghost">
          <BoldIcon className="tiptap-button-icon" />
        </Button>
        <Button data-style="ghost">
          <ItalicIcon className="tiptap-button-icon" />
        </Button>
      </ToolbarGroup>

      <ToolbarSeparator />

      <ToolbarGroup>
        <Button data-style="ghost">格式</Button>
      </ToolbarGroup>

      <Spacer />

      <ToolbarGroup>
        <Button data-style="primary">保存</Button>
      </ToolbarGroup>
    </Toolbar>
  )
}
```

## 属性

### Toolbar

| 名称         | 类型                      | 默认值       | 描述       |
| ---------- | ----------------------- | --------- | -------- |
| variant    | 'default' \| 'floating' | 'default' | 工具栏样式变体  |
| data-plain | boolean                 | undefined | 是否使用简单样式 |

### ToolbarSeparator

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