docs: Add examples
This commit is contained in:
Braks
@@ -88,7 +88,23 @@ export default defineUserConfig<DefaultThemeOptions>({
|
||||
'/examples/': [
|
||||
{
|
||||
text: 'Examples',
|
||||
children: ['/examples/'],
|
||||
children: [
|
||||
'/examples/',
|
||||
'/examples/custom-node',
|
||||
'/examples/edges',
|
||||
'/examples/nesting',
|
||||
'/examples/connectionline',
|
||||
'/examples/updatable-edge',
|
||||
'/examples/update-node',
|
||||
'/examples/validation',
|
||||
'/examples/save',
|
||||
'/examples/dnd',
|
||||
'/examples/empty',
|
||||
'/examples/hidden',
|
||||
'/examples/interaction',
|
||||
'/examples/multi',
|
||||
'/examples/stress',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Custom Connection Line
|
||||
|
||||
This example shows how you can implement a custom connection line.
|
||||
|
||||
Pass the connection line component into the template slot of the `VueFlow` component.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-custom-connection-line-0okgze?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Custom Connection Line"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-custom-connection-line-0okgze?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Custom Connection Line"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Custom Node
|
||||
|
||||
One of the key features is implementing custom elements (nodes / edges) that allow you to handle any logic you want inside your nodes.
|
||||
|
||||
You can display any content and functionality inside a custom node. More documentation about how to set
|
||||
up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes/).
|
||||
|
||||
This example shows a basic implementation of a custom node.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-custom-node-example-wznb3q?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Custom Node Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-custom-node-example-wznb3q?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Custom Node Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Drag & Drop
|
||||
|
||||
Drag and Drop Sidebar handling is not built in but can be implemented with the native HTML Drag and Drop API, as this
|
||||
example shows.
|
||||
|
||||
## State access
|
||||
|
||||
This example shows another key feature of Vue Flow. You can initialize the Flow state at any point before the Vue Flow
|
||||
is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-drag-drop-tpbm7d?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Drag & Drop"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-drag-drop-tpbm7d?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Drag & Drop"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Edges
|
||||
|
||||
Vue Flow comes with pre-defined edge types - bezier-, step-, smoothstep and straight-edges. In addition to the default
|
||||
edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-edges-3jbddk?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Edges"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-edges-3jbddk?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Edges"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Empty
|
||||
|
||||
You can add elements to your modelValue or push them to the state using the [graph utilities](/guide/utilities/graph).
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-empty-example-bcxxdv?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Empty Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-empty-example-bcxxdv?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Empty Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Hidden
|
||||
|
||||
You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`.
|
||||
|
||||
Edges that are connected to a hidden node will also be hidden as to not show any edges that lead nowhere.
|
||||
|
||||
If you set the `onlyRenderVisibleElements` prop to `true`, hidden elements will not be rendered at all instead of just hiding them with
|
||||
css. This behavior is disabled by default, meaning all elements are rendered whether they are hidden or not.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-hidden-example-nrpjl7?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Hidden Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-hidden-example-nrpjl7?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Hidden Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Basic Example
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Basic Example
|
||||
# Basic
|
||||
|
||||
This is a basic example to help you quickly get started building your own graphs. On the bottom left you see the
|
||||
Controls and on the bottom right the MiniMap component. You can see different node types (input, default, output), edge
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
# Interaction
|
||||
|
||||
This is an example showing the different interaction options Vue Flow provides.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-interaction-example-pqzf7p?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Hidden Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-interaction-example-pqzf7p?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Hidden Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Multi Flows
|
||||
|
||||
Vue Flow is not limited to a single instance on a page.
|
||||
|
||||
You can use as many component instances as you like.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-multi-flows-example-y4yn9u?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMultiFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Multi Flows Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-multi-flows-example-y4yn9u?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMultiFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Multi Flows Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Nested Nodes
|
||||
|
||||
One of the big new features in 0.4.0 is nested nodes.
|
||||
|
||||
You can define parents of a node, which are then nested inside that node.
|
||||
You can also define the boundaries of a node, i.e. if the node can be dragged outside it's parent or if it's contained to the parent
|
||||
or even let Vue Flow extend the area of a node to fit all it's children.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/compassionate-goldberg-h5dsnq?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Nested Nodes Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/compassionate-goldberg-h5dsnq?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Nested Nodes Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Save & Restore
|
||||
|
||||
::: warning BREAKING CHANGE
|
||||
__Changes from 0.3.x to 0.4.x__
|
||||
The "built-in" storage feature has been fully removed.
|
||||
:::
|
||||
|
||||
Storing nodes and loading is easy to handle.
|
||||
This example demonstrates a save & restore functionality using the `LocalStorage` of the browser.
|
||||
You are of course free to implement your own logic (for example fetching the data from an API that's connected to a database).
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-save-restore-example-1u7u6t?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Save & Restore Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-save-restore-example-1u7u6t?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Save & Restore Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Stress
|
||||
|
||||
Vue Flow is built to be fast and tries to minimize re-renders so that your application can stay smooth as possible.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-stress-zyr01z?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Stress"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-stress-zyr01z?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Stress"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Updatable Edge
|
||||
|
||||
You can enable updating edges either globally by passing the `edgesUpdatable` prop or you can enable it
|
||||
for specific edges by using the `updatable` attribute.
|
||||
|
||||
Edges can be updated by simply dragging them from one node to another at the edge-anchor.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/eager-tree-c7igf6?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Updatable Edge Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/eager-tree-c7igf6?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Updatable Edge Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Update Node
|
||||
|
||||
Updating internal node data is easy. Just manipulate your node and the changes will be reflected in the graph.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-update-node-example-q5hjp3?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Update Node Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-update-node-example-q5hjp3?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Update Node Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
pageClass: examples
|
||||
|
||||
---
|
||||
|
||||
# Connection Validation
|
||||
|
||||
Connections can be validated before edges are created and nodes get connected. This example shows how to use validators
|
||||
for handles so only connections that have been validated are created.
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-validation-example-zxbyus?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
|
||||
class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Validation Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-validation-example-zxbyus?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
|
||||
class="block dark:hidden h-full w-full min-h-[75vh]"
|
||||
title="Vue Flow: Validation Example"
|
||||
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
></iframe>
|
||||
</div>
|
||||
Reference in New Issue
Block a user