将工具栏 UI 组件添加到 Tiptap

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

安装

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

npx @tiptap/cli add toolbar

手动集成

对于 Vite 或 Next.js 之外的框架，可以从开源库手动添加该原语。

导入样式

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

用法

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>
  )
}

属性

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

ToolbarSeparator

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