Indented 缩进树
缩进树布局。树节点的层级通过水平方向的缩进量来表示。每个元素会占一行/一列。常用场景是文件目录结构。
layoutCfg.direction
类型:String
可选值:'LR' | 'RL' | 'H'
默认值:'LR'
是否必须:false
说明:树布局的方向,默认为 'LR'
,其他选项说明:
- LR —— 根节点在左,往右布局(下图左)
- RL —— 根节点在右,往左布局(下图中)
- H —— 根节点在中间,水平对称布局(下图右)
(左)LR。(中)RL。(右)H。
layoutCfg.indent
类型:Number
默认值:20
是否必须:false
说明:列间间距
layoutCfg.getWidth
类型:Number | Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'testId') return 50;
return 100;
};
是否必须:false
说明:每个节点的宽度,direction
为 'H'
时有效
layoutCfg.getHeight
类型:Number | Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'testId') return 50;
return 100;
};
是否必须:false
说明:每个节点的高度
layoutCfg.getSide
类型:Function
示例:
(d) => {
// d 是一个节点
if (d.id === 'testId') return 'left';
return 'right';
};
layoutCfg.dropCap
类型:Boolean
是否必须:false
说明:每个节点的第一个自节点是否位于下一行。默认为 true
是否必须:false
说明:节点放置在根节点左侧或右侧的回调函数,仅对与根节点直接相连的节点有效,设置后将会影响被设置节点的所有子孙节点。