MiniMap

安装

🌐 Installation

yarn add @vue-flow/minimap
  
# or
npm install @vue-flow/minimap

用法

🌐 Usage

要使用迷你地图，只需将 MiniMap 组件作为子组件传递给 VueFlow 组件即可。

🌐 To use the minimap simply pass the MiniMap component as a child to the VueFlow component.

WARNING

请确保你也导入了样式，因为这些不再是默认主题的一部分。

<script setup>
import { VueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'

// import default minimap styles
import '@vue-flow/minimap/dist/style.css'
</script>

<template>
  <VueFlow>
    <MiniMap />
  </VueFlow>
</template>

交互式迷你地图

🌐 Interactive MiniMap

可以通过使用 pannable 和 zoomable 属性使迷你地图具有交互性。

🌐 The minimap can be made interactive by using the pannable and zoomable props.

<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

名称	定义	类型	可选	默认
nodeColor	节点背景颜色	字符串，MiniMapNodeFunc	true	#fff
nodeStrokeColor	边框颜色	字符串，MiniMapNodeFunc	true	#555
nodeClassName	额外类	字符串，MiniMapNodeFunc	true	-
nodeBorderRadius	边框圆角	number	true	5
nodeStrokeWidth	笔画宽度	number	true	2
maskColor	小地图背景颜色	string	true	rgb(240, 242, 243, 0.7)
pannable	使用小地图拖动进行平移	boolean	true	false
zoomable	使用小地图滚轮缩放	boolean	true	false

插槽

🌐 Slots

名称	定义	属性	默认
node-${node.type}	小地图节点槽	MiniMapNodeProps	小地图节点