工具栏

一个样式化的工具栏组件，用于 Vue Flow 节点，具有灵活的定位和自定义操作。

Toolbar 组件提供了一个定位工具栏，可附加到 Vue Flow 画布中的节点。它具有现代卡片样式，带有背景模糊和用于操作按钮和控件的 flexbox 布局。

Toolbar 组件设计用于与 Node 组件一起使用。查看 Workflow 演示以获取完整示例。

使用 CLI 安装

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add toolbar

手动安装

将以下代码复制并粘贴到同一文件夹中。

Toolbar.vue

index.ts

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { Position } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'
import { reactiveOmit } from '@vueuse/core'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    position?: Position
  }>(),
  {
    position: Position.Bottom,
  },
)

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <NodeToolbar
    data-slot="toolbar"
    v-bind="delegatedProps"
    :class="cn(
      'flex items-center gap-1 rounded-sm border bg-background p-1.5',
      props.class,
    )"
  >
    <slot />
  </NodeToolbar>
</template>