diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md index f4daea34..9b8889d0 100644 --- a/docs/src/guide/theming.md +++ b/docs/src/guide/theming.md @@ -13,11 +13,12 @@ the default theme) can be skipped. ## Customizing default theme -When you are using the default theme there are two ways how you can style the graph pane and the elements. You can create -your own CSS rules or pass style/class properties to the components. +When you are using the default theme there are three ways how you can style the graph pane and the elements. You can create +your own CSS rules, pass style/class properties to the components or use the available css variables. - - +### Using classes + +You can customize the default theme by simply overwriting the class definitions with your own custom ones. ```css:no-line-numbers .vue-flow { @@ -25,12 +26,11 @@ your own CSS rules or pass style/class properties to the components. } ``` - +### Using styles +You can also pass a style or class attribute directly to the Vue Flow component. - - -```vue +```vue:no-line-numbers{4}
``` - +Nodes/Edges can also be styled with a style or class attribute. - - -```vue -
- -
+```ts:no-line-numbers{8-12,20-27} +const nodes = ref([ + { + id: '1', + label: 'Node 1', + position: { x: 250, y: 5 }, + + // 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' }, + }, + + { + id: '2', + label: 'Node 2', + position: { x: 100, y: 100 }, + + /* + * You can also use a function which will receive your current element as it's input. + * Useful if you want to add styles if the element is selected + */ + style: (el) => { + if (el.selected) return { background: 'purple' } + return { background: 'green' } + } + }, +]) ``` - - +### Using CSS variables -## Classnames +Some theme stylings can be overwritten by using css variables. +These variables can either be applied globally or you can define them on an element basis. -| Classname | Container | -|----------------------------------|----------------------------------------------------------| -| `.vue-flow` | Outer container | -| `.vue-flow__container` | Wrapping container elements | -| `.vue-flow__renderer` | Inner container | -| `.vue-flow__transformation-pane` | Zoom & pan pane | -| `.vue-flow__selectionpane` | Selection pane | -| `.vue-flow__selection` | User selection | -| `.vue-flow__edges` | Edges renderer wrapper | -| `.vue-flow__edge` | Edge element wrapper | -| `.vue-flow__edge-{$type}` | Edge type, either a custom or default type | -| `.vue-flow__edge .selected` | Selected Edge | -| `.vue-flow__edge .animated` | Animated edge | -| `.vue-flow__edge-path` | Edge element svg path | -| `.vue-flow__edge-text` | Edge label wrapper | -| `.vue-flow__edge-textbg` | Edge label wrapper background | -| `.vue-flow__connection` | Connection line element | -| `.vue-flow__connection-path` | Connection line svg path | -| `.vue-flow__nodes` | Nodes renderer wrapper | -| `.vue-flow__node` | Node element wrapper | -| `.vue-flow__node .selected` | Selected Node | -| `.vue-flow__node-{$type}` | Node type, either a custom or default type | -| `.vue-flow__nodesselection` | Nodes selection rect | -| `.vue-flow__handle` | Node handle element wrapper | -| `.vue-flow__handle-bottom` | Handle position bottom | -| `.vue-flow__handle-top` | Handle position top | -| `.vue-flow__handle-left` | Handle position left | -| `.vue-flow__handle-right` | Handle position right | -| `.vue-flow__handle-connecting` | Connectionline is above handle | -| `.vue-flow__handle-valid` | Connectionline is above handle & the connection is valid | -| `.vue-flow__background` | Background component | -| `.vue-flow__minimap` | Mini map component | -| `.vue-flow__controls` | Controls component | +```css +/* global defaults */ +:root { + --vf-node-bg: #fff; + --vf-node-text: #222; + --vf-connection-path: #b1b1b7; + --vf-handle: #555; +} +``` + +```ts:no-line-numbers{4-5} +const elements = ref([ + { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } }, + + // Overwrite the `--vf-node-color` variable to change the border, box-shadow and handle color of a node + { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } }, + + { id: '3', label: 'Node 3', position: { x: 400, y: 100 } }, + { id: '4', label: 'Node 4', position: { x: 400, y: 200 } }, + { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e1-3', source: '1', target: '3' }, +]) +``` + +## CSS Variables + +| Variable | Effect | +|-----------------------|------------------------------------------| +| --vf-node-color | Node border, box-shadow and handle color | +| --vf-box-shadow | Node box-shadow color | +| --vf-node-bg | Node background color | +| --vf-node-text | Node font color | +| --vf-handle | Node handle color | +| --vf-connection-path | Connectionline color | + + + +## Classes + +| Name | Container | +|--------------------------------|----------------------------------------------------------| +| .vue-flow | Outer container | +| .vue-flow__container | Wrapping container elements | +| .vue-flow__renderer | Inner container | +| .vue-flow__transformation-pane | Zoom & pan pane | +| .vue-flow__selectionpane | Selection pane | +| .vue-flow__selection | User selection | +| .vue-flow__edges | Edges renderer wrapper | +| .vue-flow__edge | Edge element wrapper | +| .vue-flow__edge-{$type} | Edge type, either a custom or default type | +| .vue-flow__edge .selected | Selected Edge | +| .vue-flow__edge .animated | Animated edge | +| .vue-flow__edge-path | Edge element svg path | +| .vue-flow__edge-text | Edge label wrapper | +| .vue-flow__edge-textbg | Edge label wrapper background | +| .vue-flow__connection | Connection line element | +| .vue-flow__connection-path | Connection line svg path | +| .vue-flow__nodes | Nodes renderer wrapper | +| .vue-flow__node | Node element wrapper | +| .vue-flow__node .selected | Selected Node | +| .vue-flow__node-{$type} | Node type, either a custom or default type | +| .vue-flow__nodesselection | Nodes selection rect | +| .vue-flow__handle | Node handle element wrapper | +| .vue-flow__handle-bottom | Handle position bottom | +| .vue-flow__handle-top | Handle position top | +| .vue-flow__handle-left | Handle position left | +| .vue-flow__handle-right | Handle position right | +| .vue-flow__handle-connecting | Connectionline is above handle | +| .vue-flow__handle-valid | Connectionline is above handle & the connection is valid | +| .vue-flow__background | Background component | +| .vue-flow__minimap | Mini map component | +| .vue-flow__controls | Controls component |