节点标识

LiteTree支持为节点指定标识，用来表示节点的特殊状态。

• 节点的标识符显示在节点头部区域，默认为1.2em宽度。所以一般只是用来显示一些简单字符或图标。
• 节点的标识符可以指定样式
• 包含一些内置节点标识，如+、-、*等
• 支持自定义节点标识

基本用法

节点标识的格式如下：

格式说明

在节点后面添加//并尾随+ - * !等标识字符

下面是一个例子：

<LiteTree>
A公司
    行政中心
        总裁办
        人力资源部      //+         增加标识     
        财务部          //+         增加标识
        行政部          //+         增加标识
        法务部
        审计部          //x         错误标识
        信息中心        //v         成功标识
    市场中心
        市场部
        销售部          //-         删除标识
        客服部          //-         删除标识
        品牌部          //-         删除标识
        市场策划部
        市场营销部      //!        代表强调
    研发中心
        移动研发部
        平台研发部      //*        修改标识
        测试部          //*        修改标识
        运维部          //*        修改标识
        产品部
        设计部
</LiteTree>

渲染效果如下：

• A公司
  • 行政中心
    • 总裁办
    • +人力资源部 增加标识
    • +财务部 增加标识
    • +行政部 增加标识
    • 法务部
    • 审计部 错误标识
    • 信息中心 成功标识
  • 市场中心
    • 市场部
    • -销售部 删除标识
    • -客服部 删除标识
    • -品牌部 删除标识
    • 市场策划部
    • 市场营销部 代表强调
  • 研发中心
    • 移动研发部
    • *平台研发部 修改标识
    • *测试部 修改标识
    • *运维部 修改标识
    • 产品部
    • 设计部

内置标识

LiteTree内置支持以下内置标识：

<LiteTree>
新增       //+     代表新增
删除       //-     代表删除
修改       //*      代表修改
强调       //!      代表强调
错误       //x      代表错误
成功       //v      代表成功
</LiteTree>

渲染效果如下：

• +新增 代表新增
• -删除 代表删除
• *修改 代表修改
• 强调 代表强调
• 错误 代表错误
• 成功 代表成功

自定义标识

除了内置标识外，LiteTree也支持自定义标识,格式如下：

格式说明

节点标题 //<节点标识符><.节点样式类><{节点样式}>

• 标识标识字符必须尾随在//后，并且不能包含空格字符
• 可以为节点标识指定样式CSS类,如//w.warning代表节点应用warning样式类。
• 可以为节点标识指定样式，如//e{color:red}代表节点应用color:red样式。

下面是一个例子：

.warning=color:#ff742e;background-color:#ffd0b3;
github=data:image/svg+xml;base64,<...此处省略自定义图标数据...>
---
成功       //s     代表成功
警告       //w.warning      代表警告
错误       //e{color:red}      代表错误
VoerkaI18n       //[github]{color:green}      使用图标标识

渲染效果如下：

• s成功 代表成功
• w警告 代表警告
• e错误 代表错误
• VoerkaI18n 使用图标标识

注意

标识区域宽度默认为1.2em，如果标识内容过长，可能会导致显示混乱。因此，一般建议标识内容尽量简短或使用图标。