參考組件
<MiniMap />

<MiniMap />

GitHub 上的原始碼

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

import { ReactFlow, MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeStrokeWidth={3} />
    </ReactFlow>
  );
}

屬性

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

#nodeColor?
string | (node: Node<T>) => string
"#e2e2e2"
#nodeStrokeColor?
string | (node: Node<T>) => string
"transparent"
#nodeClassName?
string | (node: Node<T>) => string
#nodeBorderRadius?
number
5
#nodeStrokeWidth?
number
2
#nodeComponent?
用於在迷你地圖中呈現節點的自訂組件。此組件必須呈現 SVG 元素！
#maskColor?
string
遮罩的顏色，遮罩會覆蓋目前在視窗中不可見的迷你地圖部分。
"rgb(240, 240, 240, 0.6)"
#maskStrokeColor?
string
"none"
#maskStrokeWidth?
number
1
#position?
PanelPosition
"bottom-right"
#onClick?
(event: React.MouseEvent,position: XYPosition) => void
#onNodeClick?
(event: React.MouseEvent,node: Node<T>) => void
#pannable?
boolean
決定是否可以透過在迷你地圖內拖曳來平移視窗。
false
#zoomable?
boolean
決定是否可以透過在迷你地圖內滾動來縮放視窗。
false
#ariaLabel?
string | null
小地圖內部沒有文字可供螢幕閱讀器作為輔助名稱使用，因此提供一個名稱以使小地圖具有可訪問性非常重要。預設名稱已足夠，但您可能希望將其替換為更符合您的應用程式或產品的內容。
"React Flow mini map"
#inversePan?
boolean
#zoomStep?
number
10
#offsetScale?
number
5

範例

使小地圖可互動

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

import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap pannable zoomable />
    </ReactFlow>
  );
}

實作自訂小地圖節點

可以將自訂元件傳遞給 nodeComponent 屬性，以變更節點在小地圖中的呈現方式。如果您這樣做，如果希望它正常運作，您**必須**僅在您的元件中使用 SVG 元素。

import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeComponent={MiniMapNode} />
    </ReactFlow>
  );
}
 
function MiniMapNode({ x, y }) {
  return <circle cx={x} cy={y} r="50" />;
}

請查看 MiniMapNodeProps 的文件，以了解傳遞給您自訂元件的屬性。

自訂小地圖節點顏色

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

此範例示範如何根據節點的類型為每個小地圖節點著色

import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeColor={nodeColor} />
    </ReactFlow>
  );
}
 
function nodeColor(node) {
  switch (node.type) {
    case 'input':
      return '#6ede87';
    case 'output':
      return '#6865A5';
    default:
      return '#ff0072';
  }
}

Typescript

此元件接受自訂節點類型的泛型類型引數。請參閱我們的 TypeScript 指南中的此章節以取得更多資訊。

<MiniMap<CustomNodeType> nodeColor={nodeColor} />
元件類型