<MiniMap />

<MiniMap /> 組件可用於呈現流程的概觀。它會將每個節點呈現為 SVG 元素，並視覺化目前視窗在流程其餘部分中的位置。

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap nodeStrokeWidth={3} />
</SvelteFlow>

Props

對於 TypeScript 使用者，<MiniMap /> 組件的 props 類型會匯出為 MiniMapProps。

名稱	類型	預設值
#`class?`	`string`	`-`
#`style?`	`string`	`-`
#`width?`	`number`	`-`
#`height?`	`number`	`-`
#`bgColor?`	`string`	`"#fff"`
#`nodeColor?`	`string \| (節點: Node<T>) => string`	`"#e2e2e2"`
#`nodeStrokeColor?`	`string \| (節點: Node<T>) => string`	`"transparent"`
#`nodeClass?`	`string \| (節點: Node<T>) => string`
#`nodeBorderRadius?`	`number`	`5`
#`nodeStrokeWidth?`	`number`	`2`
#`maskColor?`	`string`	`"rgb(240, 240, 240, 0.6)"`
#`maskStrokeColor?`	`string`	`"none"`
#`maskStrokeWidth?`	`number`	`1`
#`position?`	`PanelPosition`	`"bottom-right"`
#`pannable?`	`boolean` 決定是否可以透過在迷你地圖內拖曳來平移視窗。	`false`
#`zoomable?`	`boolean` 決定是否可以透過在迷你地圖內捲動來縮放視窗。	`false`
#`ariaLabel?`	`string \| null` 迷你地圖內沒有文字可供螢幕閱讀器用作無障礙名稱，因此提供一個名稱來使迷你地圖可存取非常重要。預設值已足夠，但您可能想要將其替換為更符合您的應用程式或產品的內容。	`"Svelte Flow mini map"`
#`inversePan?`	`boolean`
#`zoomStep?`	`number`	`10`

範例

讓迷你地圖可互動

依預設，迷你地圖是不可互動的。若要允許使用者透過平移或縮放迷你地圖與視窗互動，您可以將 zoomable 或 pannable（或兩者！）props 設定為 true。

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap pannable zoomable />
</SvelteFlow>

自訂迷你地圖節點顏色

nodeColor、nodeStrokeColor 和 nodeClassName 屬性可以是一個函數，該函數接受一個 Node 並計算該屬性的值。這可以用來自訂每個迷你地圖節點的外觀。

這個範例展示如何根據節點的類型為每個迷你地圖節點著色

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
 
  function nodeColor(node) {
    return node.type === 'input' ? 'blue' : 'red';
  }
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap nodeColor={nodeColor} />
</SvelteFlow>

元件類型