节点展开/收缩的用法
展开按钮自定义
演示如何自定义父节点上展开/折叠按钮的位置、外观和行为。
展开按钮自定义
功能概述
此示例演示如何自定义显示在父节点上的展开/折叠按钮,包括它们的位置、外观和行为。
核心特性实现
展开按钮位置
配置展开按钮在节点上的显示位置:
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:使展开按钮与应用设计匹配
- 无障碍:移动端更大的触摸目标
- 视觉层级:不同级别的不同样式