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>
```
### 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)
| Name | Definition | Type | Optional | Default |
|------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------|
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - |
| nodeBorderRadius | Border radius | number | true | 5 |
| nodeStrokeWidth | Stroke width | number | true | 2 |
| maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) |
| Name | Definition | Type | Optional | Default |
|------------------|------------------------------|------------------------------------------------------------|----------|-------------------------|
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - |
| nodeBorderRadius | Border radius | number | true | 5 |
| nodeStrokeWidth | Stroke width | number | true | 2 |
| 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
| Name | Definition | Props | Default |
|---------------------|-------------------|-----------------------------------------------------------------|-----------------------------------------------------|
| Name | Definition | Props | Default |
|---------------------|-------------------|-----------------------------------------------------------|-----------------------------------------------|
| `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps) | [MiniMapNode](/guide/components/minimap-node) |