chore(docs): update example styles (#1469)

* chore(docs): update basic example styles

* chore(docs): update confirm delete example styles

* chore(docs): update dnd example styles

* chore(docs): update hidden example

* chore(docs): update update node example

* chore(docs): update node toolbar example styles

* chore(docs): update transition example styles

* chore(docs): cleanup basic example els

* chore(docs): cleanup examples

docs/examples/transition/App.vue

@@ -1,38 +1,47 @@
 <script setup>
 import { ref } from 'vue'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
 import TransitionEdge from './TransitionEdge.vue'
 
+const { onInit } = useVueFlow()
+
 const nodes = ref([
   {
     id: '1',
     type: 'input',
-    label: 'Dblclick me',
+    data: { label: 'DblClick me' },
     position: { x: 0, y: 0 },
     sourcePosition: Position.Right,
   },
   {
     id: '2',
     type: 'output',
-    label: 'Dblclick me',
+    data: { label: 'DblClick me' },
     position: { x: 1000, y: 1000 },
     targetPosition: Position.Left,
   },
 ])
 
-const edges = ref([{ id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } }])
+const edges = ref([{ id: 'e1-2', type: 'custom', source: '1', target: '2', style: { stroke: '#fff' } }])
 
-const { onPaneReady } = useVueFlow()
-
-onPaneReady(({ fitView }) => {
+onInit(({ fitView }) => {
   fitView({ nodes: ['1'] })
 })
 </script>
 
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" :style="{ backgroundColor: '#1A192B' }">
+  <VueFlow :nodes="nodes" :edges="edges" class="transition-flow">
+    <Background />
+
     <template #edge-custom="props">
       <TransitionEdge v-bind="props" />
     </template>
   </VueFlow>
 </template>
+
+<style>
+.transition-flow {
+  background-color: #1a192b;
+}
+</style>