主题

¥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	定义节点边框、box-shadow 和句柄颜色
--vf-box-shadow	定义节点 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

名称	描述
.vue-flow__edges	封装器渲染边缘
.vue-flow__edge	封装每个边元素
.vue-flow__selectionpane	用于处理用户选择的窗格
.vue-flow__selection	定义当前用户选择框
.vue-flow__edge-{type---BRACE-RIGHT--	边类型（自定义或默认）
.vue-flow__edge.selected	定义当前选定的边
.vue-flow__edge.animated	定义动画边缘
.vue-flow__edge-path	边元素的 SVG 路径
.vue-flow__edge-text	边缘标签封装器
.vue-flow__edge-textbg	边缘标签周围的背景封装
. vue-flow__connectionline	连接线元素的容器
.vue-flow__connection	单个连接线元素
.vue-flow__connection-path	连接线的 SVG 路径

节点

¥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	连接线位于句柄上方，且连接有效