chore(docs): update validation example text
This commit is contained in:
@@ -1,32 +1,20 @@
|
|||||||
# Connection Validation
|
# Connection Validation
|
||||||
|
|
||||||
Connections can be validated before edges are created and nodes get connected.
|
To validate connections before they are created you can either pass a function to the `is-valid-connection` prop of the `<Handle />` component
|
||||||
|
or use the `onConnect` event of the `<VueFlow />` component.
|
||||||
|
|
||||||
|
Another alternative is to pass a `isValidConnection` function to the `is-valid-connection` prop of the `<VueFlow />` component.
|
||||||
|
This function will be applied to *all* connections in the flow (even existing ones).
|
||||||
|
|
||||||
## Using a handle in a custom node
|
## Using a handle in a custom node
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<div>
|
<div>
|
||||||
[ ... ]
|
<!-- ... -->
|
||||||
|
<Handle type="source" :is-valid-connection="isValidConnection"/>
|
||||||
<Handle type="source" :is-valid-connection="isValidConnection" />
|
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Passing as node option
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const nodes = [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
label: 'Node 1',
|
|
||||||
position: { x: 0, y: 0 },
|
|
||||||
isValidSourcePos: (connection) => {
|
|
||||||
return connection.target === '2'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
```
|
|
||||||
|
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<Repl example="validation"></Repl>
|
<Repl example="validation"></Repl>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user