JavaScript is required

节点展开/收缩的用法

展开按钮自定义

演示如何自定义父节点上展开/折叠按钮的位置、外观和行为。

展开按钮自定义

功能概述

此示例演示如何自定义显示在父节点上的展开/折叠按钮,包括它们的位置、外观和行为。

核心特性实现

展开按钮位置

配置展开按钮在节点上的显示位置:

const graphOptions: RGOptions = {
    defaultExpandHolderPosition: 'right' // 'left', 'right', 'top', 'bottom'
};

单个节点位置覆盖

为单个节点设置展开按钮位置:

nodes: [
    { id: 'a', expandHolderPosition: 'right' },
    { id: 'b', expandHolderPosition: 'left' }
]

自定义展开按钮样式

使用 CSS 或自定义组件设置展开按钮样式:

// CSS 自定义
.expand-holder {
    background: '#43a2f1';
    border-radius: '4px';
}

创意使用场景

  • 定向树:根据树方向定位按钮
  • 自定义图标:用自定义图标替换默认按钮
  • 交互式 UI:使展开按钮与应用设计匹配
  • 无障碍:移动端更大的触摸目标
  • 视觉层级:不同级别的不同样式