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

chore(docs): update interaction example styles

Browse Source
This commit is contained in:
braks
2024-06-09 15:04:03 +02:00
parent ee8d30d1cf
commit 01e1b32104
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/interaction/InteractionControls.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { useVueFlow } from '@vue-flow/core' import { Panel, useVueFlow } from '@vue-flow/core'
import { ref } from 'vue' import { ref } from 'vue'
const { const {
@@ -42,7 +42,7 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
</script> </script>
<template> <template>
<div class="controls"> <Panel position="top-right">
<div> <div>
<label class="label" for="draggable"> <label class="label" for="draggable">
nodesDraggable nodesDraggable
@@ -113,5 +113,5 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
<input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" /> <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
</label> </label>
</div> </div>
</div> </Panel>
</template> </template>
docs/examples/interaction/style.css
+14 -11
View File
@@ -1,15 +1,18 @@
.interactionflow .controls { .vue-flow__panel {
position: absolute; background-color: #2d3748;
left: 0; padding: 10px;
top: 0; border-radius: 8px;
z-index: 4; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font-size: 11px; color: white;
background-color: lightgray; display: flex;
border-bottom-right-radius: 10px; flex-direction: column;
padding: 8px; gap: 2px;
font-size: 12px;
font-weight: 600;
} }
.interactionflow .controls .label {
.vue-flow__panel .label {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -17,6 +20,6 @@
cursor: pointer; cursor: pointer;
} }
.interactionflow .controls .label input { .vue-flow__panel .label input {
cursor: pointer; cursor: pointer;
} }
docs/examples/save-restore/style.css
+5
View File
@@ -29,3 +29,8 @@
background-color: #2563eb; background-color: #2563eb;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.vue-flow__panel button svg {
width: 100%;
height: 100%;
}