组件

¥Components

<Background />

Background 组件可以方便地渲染基于节点的 UI 中常见的不同类型的背景。它有三种变体：线、点和十字。

<BaseEdge />

BaseEdge 组件在内部用于所有边缘。它可以在自定义边缘内使用，并为你处理不可见的辅助边缘和边缘标签。

<ControlButton />

你可以使用 ControlButton 组件将按钮添加到控制面板，并将其作为子组件传递给 Controls 组件。

<Controls />

Controls 组件渲染一个小面板，其中包含方便的按钮，用于放大、缩小、适合视图和锁定视口。

<EdgeLabelRenderer />

边缘基于 SVG。如果你想渲染更复杂的标签，你可以使用 EdgeLabelRenderer 组件访问基于 div 的渲染器。此组件是一个门户，它将标签渲染在位于边缘顶部的 div 中。你可以在边缘标签渲染器示例中看到组件的示例用法。

<EdgeText />

你可以将 EdgeText 组件用作辅助组件，以在自定义边缘内显示文本。

<Handle />

Handle 组件用于你的自定义节点中以定义连接点。

<MiniMap />

MiniMap 组件可用于渲染流程的概览。它将每个节点渲染为 SVG 元素，并可视化当前视口相对于其余流的位置。

<NodeResizeControl />

要创建自己的调整大小 UI，你可以使用 NodeResizeControl 组件，你可以在其中传递子项（例如图标）。

<NodeResizer />

NodeResizer 组件可用于向节点添加调整大小功能。它渲染节点周围的可拖动控件以在所有方向上调整大小。

<NodeToolbar />

NodeToolbar 组件可以将工具栏或工具提示渲染到自定义节点的一侧。此工具栏不会随视口缩放，因此内容始终可见。

<Panel />

Panel 组件可帮助你将内容定位在视口上方。它由 MiniMap 和 Controls 组件内部使用。

<ViewportPortal />

The ViewportPortal component can be used to add components to the same viewport of the flow where nodes and edges are rendered. This is useful when you want to render your own components that are adhere to the same coordinate system as the nodes & edges and are also affected by zooming and panning

<ReactFlowProvider />