自定义展开器插槽

演示如何使用插槽完全自定义展开/折叠按钮，包含自定义图标、动画和行为。

自定义展开器插槽

功能概述

此示例演示如何使用插槽完全自定义展开/折叠按钮组件，允许自定义图标、动画和行为。

核心特性实现

自定义展开器组件

创建自定义展开/折叠按钮：

const MyExpandHolder = ({ node, onToggle }: { node: RGNode, onToggle: () => void }) => {
    return (
        <div
            className="custom-expand-button"
            onClick={onToggle}
        >
            {node.collapsed ? '+' : '-'}
        </div>
    );
};

插槽集成

在节点插槽中使用自定义组件：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <>
            <div>{node.text}</div>
            {node.lot.childs.length > 0 && (
                <MyExpandHolder
                    node={node}
                    onToggle={() => graphInstance.toggleNodeCollapsed(node)}
                />
            )}
        </>
    )}
</RGSlotOnNode>

动画过渡

展开/折叠时添加动画：

const toggleWithAnimation = async (node: RGNode) => {
    graphInstance.enableCanvasAnimation();
    graphInstance.toggleNodeCollapsed(node);
    await graphInstance.sleep(300);
    graphInstance.disableCanvasAnimation();
};

创意使用场景

• 品牌 UI：使展开按钮与设计系统匹配
• 图标库：使用特定的图标集（FontAwesome、Material）
• 动画按钮：自定义悬停和单击动画
• 上下文感知：不同节点类型的不同图标
• 无障碍：高对比度或更大的按钮以提高可见性