带有 Lucide 图标的自定义工具栏

功能概述

本示例演示如何使用关系图工具栏插槽结合 Lucide React 图标创建自定义工具栏。它显示了三种工具栏配置：左侧的垂直迷你工具栏、底部的主工具栏以及右侧的带有迷你地图视图切换开关的水平迷你工具栏。该示例包括交互式按钮状态（收藏切换）并演示如何处理工具栏按钮点击。

核心特性实现

RGToolBar 插槽使用

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        <RGToolBar>
            <div className="rg-mb-button" onClick={() => myToolbarBtnAction('favo')}>
                <Star size={18} color={favo ? "#df7f03" : "currentColor"} fill={favo ? "#df7f03" : "none"} />
            </div>
            <div className="rg-mb-button" onClick={() => myToolbarBtnAction('Click:Share')}>
                <Share2 size={18} />
            </div>
            <div className="rg-mb-button" onClick={() => myToolbarBtnAction('Click:Help')}>
                <Settings size={18} />
            </div>
        </RGToolBar>
    </RGSlotOnView>
</RelationGraph>

带定位的 RGMiniToolBar

<RGMiniToolBar positionV='top' positionH='left' direction='v'>
    <div className="rg-mb-button" onClick={() => myToolbarBtnAction('favo')}>
        <Star size={14} />
    </div>
    <div className="rg-mb-button" onClick={() => myToolbarBtnAction('aaa2')}>
        <Share2 size={14} />
    </div>
</RGMiniToolBar>

按钮状态管理

const [favo, setFavo] = useState(false);

const myToolbarBtnAction = (msg: string) => {
    if (msg === 'favo') {
        setFavo(!favo);
    } else {
        alert(msg);
    }
};

小地图切换

const [showMiniView, setShowMiniView] = useState(true);

<RGMiniToolBar positionV='top' positionH='right' direction='h'>
    <div onClick={() => setShowMiniView(!showMiniView)}>
        <LocateIcon size={14} />
    </div>
</RGMiniToolBar>
{showMiniView && <RGMiniView position='tr' />}

图标集成

使用 Lucide React 图标以保持一致的样式：

import { Star, Share2, Settings, LocateIcon } from 'lucide-react';

创意使用场景

图编辑器：在主工具栏中添加保存、导出、撤销/重做按钮。

数据浏览器：在工具栏中包含筛选、搜索和布局切换按钮。

协作工具：添加共享、评论和用户在线状态按钮。

分析仪表板：包括刷新、导出和设置按钮。

演示模式：添加全屏、缩放和导航控件。

自定义工具栏按钮

自定义工具栏按钮 - 创建带有图标按钮的自定义工具栏