主题

🌐 Theming

让我们一起了解 Vue Flow 提供的库样式、可自定义选项以及其他开箱即用的功能。

🌐 Let's take a tour around the library styles, customization opportunities, and other features that Vue Flow offers out of the box.

库样式

🌐 Library Styles

Vue Flow 重视灵活性，并允许你在样式方面掌握主导权。它展示了一些必须导入的基本样式，同时将可选功能（例如默认主题）交由你自行选择。

🌐 Vue Flow values flexibility and allows you to take the lead when it comes to styling. It showcases some obligatory stylings that must be imported, while leaving optional features, such as the default theme, up to your preference.

导入必要和可选样式：

🌐 To import the necessary and optional styles:

/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';

调整默认主题

🌐 Adjusting the Default Theme

Vue Flow 的默认主题作为你的基础，你可以使用 CSS 规则、样式和类属性以及 CSS 变量根据自己的喜好进行自定义和装饰。

🌐 The Vue Flow default theme functions as your baseline, which you can customize and decorate as per your liking using CSS rules, style and class properties, and CSS variables.

使用 CSS 类进行样式设置

🌐 Styling with CSS Classes

以下是如何使用 CSS 类来为主题添加亮色或更改字体样式：

🌐 Here's how you can use CSS classes to add a pop of color or alter the font style for the theme:

/* Use a purple theme for our custom node */
.vue-flow__node-custom {
    background: purple;
    color: white;
    border: 1px solid purple;
    border-radius: 4px;
    box-shadow: 0 0 0 1px purple;
    padding: 8px;
}

Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.

使用 CSS 属性

🌐 Using CSS Properties

你还可以直接将样式或类属性传递给 Vue Flow 组件和节点/边。

🌐 You can also directly pass a style or class attribute to Vue Flow components and nodes/edges.

以下是一些如何执行此操作的示例：

🌐 Below are a couple of examples on how you can do this:

直接设置 Vue Flow 组件的样式：

🌐 Directly styling the Vue Flow component:

<VueFlow
  :nodes="nodes"
  :edges="edges"
  class="my-diagram-class"  
  :style="{ background: 'red' }"
/>

使用 style 或 class 属性设置节点/边的样式：

🌐 Styling nodes/edges with a style or class attribute:

/* Customizing node by assigning class and style properties */
const nodes = ref([
  { 
    id: '1', 
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
    
    // Add a class name to the node
    class: 'my-custom-node-class',
    
    // You can pass an object containing CSSProperties or CSS variables
    style: { backgroundColor: 'green', width: '200px', height: '100px' },
  },
])

使用 CSS 变量重新定义样式

🌐 Redefining Styles with CSS variables

某些已定义的主题样式可以使用 CSS 变量来覆盖。这些更改可以在全局范围内或对单个元素进行实现。

🌐 Some of the defined theme styles can be overwritten using CSS variables. These alterations can be implemented either on a global scale or to individual elements.

css

/* Global default CSS variable values */
:root {
    --vf-node-bg: #fff;
    --vf-node-text: #222;
    --vf-connection-path: #b1b1b7;
    --vf-handle: #555;
}

const nodes = ref([
  { 
    id: '1', 
    position: { x: 100, y: 100 }, 
    data: { label: 'Node 1' },
    /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
    style: { '--vf-node-color': 'blue' } 
  },
])

CSS 变量

🌐 CSS Variables

以下是你可以考虑的 CSS 变量及其效果的简明列表：

🌐 Here's a concise list of CSS variables you can consider, along with their effects:

变量	作用
--vf-node-color	定义节点边框、盒阴影和控制点颜色
--vf-box-shadow	定义节点盒阴影颜色
--vf-node-bg	定义节点背景颜色
--vf-node-text	定义节点文本颜色
--vf-handle	定义节点控制点颜色
--vf-connection-path	定义连接线颜色

CSS 类名

🌐 CSS Class Names

你可以在这里找到类名及其各自元素的便捷参考指南：

🌐 Here you'll find a handy reference guide of class names and their respective elements:

容器

🌐 Containers

名称	容器
.vue-flow	外部容器
.vue-flow__container	容器元素的封装器
.vue-flow__viewport	内部容器
.vue-flow__background	背景组件
.vue-flow__minimap	迷你地图组件
.vue-flow__controls	控件组件

边缘

🌐 Edges

Name	Description
.vue-flow__edges	Wrapper rendering edges
.vue-flow__edge	Wrapper around each edge element
.vue-flow__selectionpane	Pane for handling user selection
.vue-flow__selection	Defines current user selection box
.vue-flow__edge-{type}	Edge type (either custom or default)
.vue-flow__edge.selected	Defines the currently selected edge(s)
.vue-flow__edge.animated	Defines an animated edge
.vue-flow__edge-path	SVG path for edge elements
.vue-flow__edge-text	Wrapper around edge label
.vue-flow__edge-textbg	Background wrapper around edge label
.vue-flow__connectionline	Container for the connection line elements
.vue-flow__connection	Individual connection line element
.vue-flow__connection-path	SVG path for connection line

节点

🌐 Nodes

名称	描述
.vue-flow__nodes	节点的渲染封装器
.vue-flow__node	每个节点元素的封装器
.vue-flow__node.selected	定义当前选中的节点
.vue-flow__node-{type}	节点类型（自定义或默认）
.vue-flow__nodesselection	定义节点的选择矩形

节点句柄

🌐 Node Handles

名称	描述
.vue-flow__handle	节点句柄元素的封装
.vue-flow__handle-bottom	在底部定义一个句柄
.vue-flow__handle-top	在顶部定义一个句柄
.vue-flow__handle-left	在左侧定义一个句柄
.vue-flow__handle-right	在右侧定义一个句柄
.vue-flow__handle-connecting	连接线在句柄上方
.vue-flow__handle-valid	连接线在句柄上方且连接有效