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

docs: add info on interactive minimap props

Browse Source
This commit is contained in:
braks
2022-11-14 20:33:21 +01:00
parent a56ea41182
commit fd095d1c1d
1 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/components/minimap.md
+26 -10
View File
@@ -12,19 +12,35 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo
</template> </template>
``` ```
### Interactive MiniMap
The minimap can be made interactive by using the `pannable` and `zoomable` props.
```vue
<template>
<VueFlow>
<MiniMap pannable zoomable />
</VueFlow>
</template>
```
When enabled, these props allow you to pan on drag and zoom on scroll using the MiniMap.
## [Props](/typedocs/interfaces/MiniMapProps) ## [Props](/typedocs/interfaces/MiniMapProps)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------| |------------------|------------------------------|------------------------------------------------------------|----------|-------------------------|
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff | | nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 | | nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - | | nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - |
| nodeBorderRadius | Border radius | number | true | 5 | | nodeBorderRadius | Border radius | number | true | 5 |
| nodeStrokeWidth | Stroke width | number | true | 2 | | nodeStrokeWidth | Stroke width | number | true | 2 |
| maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) | | maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) |
| pannable | Use Minimap to pan on drag | boolean | true | false |
| zoomable | Use Minimap to zoom on wheel | boolean | true | false |
## Slots ## Slots
| Name | Definition | Props | Default | | Name | Definition | Props | Default |
|---------------------|-------------------|-----------------------------------------------------------------|-----------------------------------------------------| |---------------------|-------------------|-----------------------------------------------------------|-----------------------------------------------|
| `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps) | [MiniMapNode](/guide/components/minimap-node) | | `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps) | [MiniMapNode](/guide/components/minimap-node) |