控件

一个样式化的控件组件，用于基于 Vue Flow 的画布，具有缩放和适应视图功能。

Controls 组件为 Vue Flow 画布提供交互式缩放和适应视图控件。 它包括现代、主题化的设计，带有背景模糊和卡片样式。

使用 CLI 安装

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add controls

手动安装

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

Controls.vue
index.ts
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { Controls as ControlsPrimitive } from '@vue-flow/controls'
import { reactiveOmit } from '@vueuse/core'
import '@vue-flow/controls/dist/style.css'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

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

<template>
  <ControlsPrimitive
    data-slot="controls"
    v-bind="delegatedProps"
    :class="cn(
      'gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!',
      '[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!',
      props.class,
    )"
  />
</template>

特性

  • 放大/缩小控件
  • 适应视图按钮，用于居中并缩放内容
  • 圆角药丸设计，带有背景模糊
  • 主题感知的卡片背景
  • 微妙的投影以增加深度
  • 完整的 TypeScript 支持
  • 兼容所有 Vue Flow 控件功能

Props

<Controls />

classstring
''
应用于控件的额外 CSS 类。
Edit this page
连接
边缘