图标按钮节点

演示在树形布局中使用 Lucide React 图标创建带有圆形设计的交互式图标按钮节点。

图标按钮节点

功能概述

本示例演示如何使用 Lucide React 图标创建呈现为交互式图标按钮的节点。节点使用带有嵌入图标和文本标签的自定义圆形设计。

核心特性实现

图标映射系统

const IconMapper: Record<string, React.FC<any>> = {
    football: Orbit,
    default: CircleDot
};

圆形图标节点插槽

<RGSlotOnNode>
    {(nodeSlotProps) => {
        const { node } = nodeSlotProps;
        return (
            <div className="my-icon-node gap-2 flex rounded-full place-items-center justify-center">
                <LandPlotIcon size={10} />
                {node.text}
            </div>
        );
    }}
</RGSlotOnNode>

带圆形节点的树形布局

const graphOptions: RGOptions = {
    backgroundColor: '#004466',
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 140,
        treeNodeGapV: 10
    }
};

创意使用场景

控制面板：创建带有图标按钮的可视控制面板，用于不同的功能。树形结构显示控制层次结构。

导航系统：基于图标的导航树，每个图标代表一个部分或功能。直观的可视化导航。

快速操作菜单：由图标表示的快速操作的分层菜单。用户向下钻取以查找特定操作。

仪表盘小部件：交互式仪表盘，其中节点是小部件控件。图标指示小部件类型和功能。

设置界面：按树组织的设置，每个设置类别都有图标按钮。视觉隐喻帮助用户找到设置。

功能发现：交互式功能树，用户通过单击图标节点来探索功能。适合入职培训和帮助系统。

分层工具：按层次组织的工具和子工具，带有图标。专业软件界面通常使用此模式。

设备控制：带有分层图标按钮的工业设备控制面板。模拟物理控制面板布局。