alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(guide): update intro page

Browse Source
This commit is contained in:
braks
2023-11-05 12:07:09 +01:00
committed by Braks
parent d670de4671
commit 39cf82431f
4 changed files with 74 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/src/guide/getting-started.md
View File

@@ -32,32 +32,35 @@ and [<span class="font-bold text-purple-500">edges</span>](/typedocs/types/Edge)
Nodes additionally need a specific position, while edges require a source and a
target, both represented by node ids.
Below is a basic example:
::: warning Attention!
To ensure Vue Flow's is correctly displayed, make sure you include the necessary styles.
Refer to the [Theming](/guide/theming) section for additional information.
:::
```vue
<script setup>
import {VueFlow} from '@vue-flow/core'
import { VueFlow } from '@vue-flow/core'
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
const elements = ref([
// Nodes
// An input node, specified by using `type: 'input'`
{id: '1', type: 'input', label: 'Node 1', position: {x: 250, y: 5}},
// Default nodes, you can omit `type: 'default'`
{id: '2', label: 'Node 2', position: {x: 100, y: 100},},
{id: '3', label: 'Node 3', position: {x: 400, y: 100}},
// Default nodes, you can omit `type: 'default'`
{id: '2', label: 'Node 2', position: {x: 100, y: 100},},
{id: '3', label: 'Node 3', position: {x: 400, y: 100}},
// An output node, specified by using `type: 'output'`
{id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
// An output node, specified by using `type: 'output'`
{id: '4', type: 'output', label: 'Node 4', position: {x: 400, y: 200}},
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{id: 'e1-3', source: '1', target: '3'},
// Edges
// Most basic edge, only consists of an id, source-id and target-id
{id: 'e1-3', source: '1', target: '3'},
// An animated edge
{id: 'e1-2', source: '1', target: '2', animated: true},
])
// An animated edge
{id: 'e1-2', source: '1', target: '2', animated: true},
])
</script>
<template>
@@ -73,9 +76,6 @@ Below is a basic example:
</style>
```
::: warning To ensure Vue Flow's functionality and design are optimally displayed, make sure you include the necessary
styles. Refer to the [Theming](/guide/theming) section for additional information. :::
## TypeScript
As Vue Flow is entirely written in TypeScript, we highly recommend utilizing TypeScript for improved developer