chore(docs): wrap Repl in client only
This commit is contained in:
braks
122
docs/components/DocsRepl.vue
Normal file
122
docs/components/DocsRepl.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script lang="ts" setup>
|
||||
import type { SFCOptions } from '@vue/repl'
|
||||
import { ReplStore, Repl as VueRepl } from '@vue/repl'
|
||||
import { useVueFlow } from '@vue-flow/core'
|
||||
import '@vue/repl/style.css'
|
||||
import { isClient } from '@vueuse/core'
|
||||
import { exampleImports } from './examples'
|
||||
|
||||
const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
|
||||
|
||||
const { vueFlowVersion } = useVueFlow()
|
||||
|
||||
let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
|
||||
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
text-transform: uppercase;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.vue-flow__minimap {
|
||||
transform: scale(75%);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
\n`
|
||||
|
||||
const store = new ReplStore({
|
||||
showOutput: true,
|
||||
outputMode: 'preview',
|
||||
})
|
||||
|
||||
const vh = useCssVar('--vh')
|
||||
|
||||
watchEffect(() => {
|
||||
vh.value = `${window.innerHeight}px`
|
||||
})
|
||||
|
||||
const files: any = {}
|
||||
const imports = exampleImports[props.example]
|
||||
const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
|
||||
|
||||
for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
|
||||
if (example.includes('css')) {
|
||||
css += `${imports[example as keyof typeof imports]}`
|
||||
} else {
|
||||
files[example] = imports[example as keyof typeof imports]
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await store.setVueVersion('3.2.37')
|
||||
|
||||
await store.setFiles(
|
||||
{
|
||||
...files,
|
||||
'main.css': css,
|
||||
},
|
||||
props.mainFile ?? 'App.vue',
|
||||
)
|
||||
|
||||
// pre-set import map
|
||||
await store.setImportMap({
|
||||
imports: {
|
||||
'@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
|
||||
'@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
|
||||
...additionalImports,
|
||||
},
|
||||
})
|
||||
|
||||
if (isClient) {
|
||||
document.body.className += 'examples'
|
||||
}
|
||||
})
|
||||
|
||||
const sfcOptions = {
|
||||
script: {
|
||||
reactivityTransform: true,
|
||||
},
|
||||
} as SFCOptions
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueRepl
|
||||
:clear-console="true"
|
||||
:auto-resize="true"
|
||||
:store="store"
|
||||
:show-compile-output="false"
|
||||
:show-import-map="false"
|
||||
:sfc-options="sfcOptions"
|
||||
@keydown.ctrl.s.prevent
|
||||
@keydown.meta.s.prevent
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.file-selector {
|
||||
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
|
||||
}
|
||||
|
||||
.vue-repl {
|
||||
--vh: 100vh;
|
||||
|
||||
@apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
|
||||
|
||||
height: calc(var(--vh) - 72px);
|
||||
}
|
||||
|
||||
.msg.err {
|
||||
@apply hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,117 +1,15 @@
|
||||
<script lang="ts" setup>
|
||||
import { ReplStore, Repl as VueRepl } from '@vue/repl'
|
||||
import { useVueFlow } from '@vue-flow/core'
|
||||
import '@vue/repl/style.css'
|
||||
import { exampleImports } from './examples'
|
||||
<script>
|
||||
import { isClient } from '@vueuse/core'
|
||||
import DocsRepl from './DocsRepl.vue'
|
||||
|
||||
const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
|
||||
const { vueFlowVersion } = useVueFlow()
|
||||
let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
|
||||
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
|
||||
export default defineComponent({
|
||||
props: ['example'],
|
||||
setup(props) {
|
||||
return () => {
|
||||
if (!isClient) return null
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
text-transform: uppercase;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.vue-flow__minimap {
|
||||
transform: scale(75%);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
\n`
|
||||
|
||||
const store = new ReplStore({
|
||||
showOutput: true,
|
||||
outputMode: 'preview',
|
||||
})
|
||||
|
||||
const vh = useCssVar('--vh')
|
||||
|
||||
watchEffect(
|
||||
() => {
|
||||
vh.value = `${window.innerHeight}px`
|
||||
return h(DocsRepl, props)
|
||||
}
|
||||
},
|
||||
{ flush: 'post' },
|
||||
)
|
||||
|
||||
const files: any = {}
|
||||
const imports = exampleImports[props.example]
|
||||
const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
|
||||
|
||||
for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
|
||||
if (example.includes('css')) {
|
||||
css += `${imports[example as keyof typeof imports]}`
|
||||
} else {
|
||||
files[example] = imports[example as keyof typeof imports]
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await store.setVueVersion('3.2.37')
|
||||
|
||||
await store.setFiles(
|
||||
{
|
||||
...files,
|
||||
'main.css': css,
|
||||
},
|
||||
props.mainFile ?? 'App.vue',
|
||||
)
|
||||
|
||||
// pre-set import map
|
||||
store.setImportMap({
|
||||
imports: {
|
||||
'@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
|
||||
'@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
|
||||
...additionalImports,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const sfcOptions = {
|
||||
script: {
|
||||
reactivityTransform: true,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueRepl
|
||||
:clear-console="true"
|
||||
:auto-resize="true"
|
||||
:store="store"
|
||||
:show-compile-output="false"
|
||||
:show-import-map="false"
|
||||
:sfc-options="sfcOptions"
|
||||
@keydown.ctrl.s.prevent
|
||||
@keydown.meta.s.prevent
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.file-selector {
|
||||
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
|
||||
}
|
||||
|
||||
.vue-repl {
|
||||
--vh: 100vh;
|
||||
|
||||
@apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
|
||||
|
||||
height: calc(var(--vh) - 72px);
|
||||
}
|
||||
|
||||
.msg.err {
|
||||
@apply hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -216,8 +216,8 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
|
||||
items: [
|
||||
{ text: 'Edges', link: '/examples/edges/' },
|
||||
{ text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
|
||||
{ text: 'Custom Connectionline', link: '/examples/edges/connection-line' },
|
||||
{ text: 'Connection validation', link: '/examples/edges/validation' },
|
||||
{ text: 'Custom Connection Line', link: '/examples/edges/connection-line' },
|
||||
{ text: 'Connection Validation', link: '/examples/edges/validation' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -10,8 +10,16 @@
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
|
||||
.VPPage {
|
||||
@apply px-8 py-6 md:px-12 lg:px-24;
|
||||
.examples .VPDoc {
|
||||
@apply !px-8 !py-6 md:!px-12 lg:!px-24;
|
||||
}
|
||||
|
||||
.examples .content-container {
|
||||
@apply max-w-full;
|
||||
}
|
||||
|
||||
.examples .aside {
|
||||
@apply !hidden;
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
||||
1
docs/src/components.d.ts
vendored
1
docs/src/components.d.ts
vendored
@@ -20,6 +20,7 @@ declare module '@vue/runtime-core' {
|
||||
CustomEdgeLabel: typeof import('./../components/examples/edges/CustomEdgeLabel.vue')['default']
|
||||
CustomInput: typeof import('./../components/examples/validation/CustomInput.vue')['default']
|
||||
CustomNode: typeof import('./../components/examples/custom-node/CustomNode.vue')['default']
|
||||
DocsRepl: typeof import('./../components/DocsRepl.vue')['default']
|
||||
Features: typeof import('./../components/home/Features.vue')['default']
|
||||
Flow: typeof import('./../components/examples/multi/Flow.vue')['default']
|
||||
Home: typeof import('./../components/home/Home.vue')['default']
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Drag & Drop
|
||||
|
||||
Adding nodes to an already existing graph can be done multiple ways. To create an interactive editor, you would probably
|
||||
@@ -16,9 +11,5 @@ This example shows another key feature of Vue Flow. You can initialize the Flow
|
||||
is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="dnd"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="dnd"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Custom Connection Line
|
||||
|
||||
If the default connection lines aren't to your liking, or you want to expand on the existing
|
||||
@@ -11,9 +6,5 @@ functionality you can use your own custom connection line.
|
||||
Simply pass a component in the designated template slot, and you're good to go.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="connectionline"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="connectionline"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Edges
|
||||
|
||||
Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
|
||||
In addition to the built-in 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="edges"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="edges"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Updatable Edge
|
||||
|
||||
Existing edges can be updated, meaning their source / target position can be changed interactively.
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Connection Validation
|
||||
|
||||
Connections can be validated before edges are created and nodes get connected.
|
||||
|
||||
## Using a handle in a custom node
|
||||
|
||||
```vue
|
||||
<div>
|
||||
[ ... ]
|
||||
@@ -17,6 +13,7 @@ Connections can be validated before edges are created and nodes get connected.
|
||||
```
|
||||
|
||||
## Passing as node option
|
||||
|
||||
```ts
|
||||
const nodes = [
|
||||
{
|
||||
@@ -31,9 +28,5 @@ const nodes = [
|
||||
```
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="validation"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="validation"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Empty
|
||||
|
||||
Similar to the drag and drop example, we can also add nodes to an empty graph on a button click,
|
||||
which triggers a push into our elements / nodes array.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="empty"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="empty"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
This example demonstrates "floating edges".
|
||||
|
||||
The positions of the source and target nodes are calculated dynamically,
|
||||
the caveat here is, that edge-anchors are still tied to Handles (even though invisible in this example),
|
||||
so connections would, by default, only be triggered when hovering over the handles (bottom / top by default).
|
||||
|
||||
<div class="mt-6">
|
||||
<iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?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: Floating 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-floating-edges-zfxdok?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: Floating 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>
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Hidden
|
||||
|
||||
You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`.
|
||||
@@ -16,9 +11,5 @@ This can save you some time on initial renders but consider that moving the pane
|
||||
which can cause performance spikes depending on the complexity of the components that have to be mounted.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="hidden"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="hidden"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Horizontal Layout
|
||||
|
||||
Vue Flow doesn't require you to use vertical layouts.
|
||||
@@ -11,9 +6,5 @@ You can use horizontal layouts with the default node types as well.
|
||||
You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="horizontal"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="horizontal"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Basic
|
||||
|
||||
This is a basic example to help you familiarize with the basic features of Vue Flow.
|
||||
@@ -11,9 +6,5 @@ On the bottom left you see the viewport-controls and on the bottom right the min
|
||||
You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="basic"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="basic"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
# Interaction
|
||||
|
||||
Vue Flow provides options to interact and limit interaction with the viewport and graph.
|
||||
@@ -10,9 +6,5 @@ This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
|
||||
In the sandbox below you can find an example showing you how to toggle interaction options.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="interaction"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="interaction"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,7 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
# Intersection
|
||||
|
||||
Vue Flow provides utils to find intersections of nodes with other nodes (or a given area).
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="intersection"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="intersection"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Multi Flows
|
||||
|
||||
Vue Flow is not limited to a single instance on a page.
|
||||
@@ -10,9 +5,5 @@ 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">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="multi"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="multi"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Custom Node
|
||||
|
||||
One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic functionalities (dragging, selecting etc).
|
||||
@@ -11,9 +6,5 @@ You can display any content and functionality inside a custom node. More documen
|
||||
up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="customNode"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="customNode"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Nested Nodes
|
||||
|
||||
Another key feature is nested nodes (or even nested flows).
|
||||
@@ -12,9 +7,5 @@ You can also define the boundaries of a node, i.e. if the node can be dragged ou
|
||||
or even let Vue Flow extend the area of a node to fit all it's children.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="nested"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="nested"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Update Node
|
||||
|
||||
Updating internal node data is simple.
|
||||
@@ -14,9 +9,5 @@ That means you can manipulate any property of your original nodes, and it will t
|
||||
You can of course also access the nodes directly from the state and change their properties from there.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="updateNode"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="updateNode"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Pinia
|
||||
|
||||
Using your existing storage implementation is not an issue.
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Save & Restore
|
||||
|
||||
There is no built-in persistent storage feature, however you can use your own storage implementation.
|
||||
@@ -17,9 +12,5 @@ You can extend on this basic idea however you like, i.e. fetch data that you tra
|
||||
some other business logic you would like to handle.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="saveRestore"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="saveRestore"></Repl>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Stress
|
||||
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Teleport
|
||||
|
||||
|
||||
@@ -1,17 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
---
|
||||
|
||||
# Transition
|
||||
|
||||
Vue Flow allows you to use transitions while zooming and panning around the Viewport.
|
||||
This example shows you how to use these transitions to animate actions on your graph.
|
||||
|
||||
<div class="mt-6">
|
||||
<ClientOnly>
|
||||
<Suspense>
|
||||
<Repl example="transition"></Repl>
|
||||
</Suspense>
|
||||
</ClientOnly>
|
||||
<Repl example="transition"></Repl>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user