Tree树型菜单组件

ax-tree组件可创建多层次的树菜单,支持分页和缓加载。

简单使用

ax-tree为本框架的自定义树组件,对ul+liol+li结构的容器节点使用ax-tree标签即可。

使用完整的结构树(属性)

可以像tree模块那样使用完整的树结构。

  • 输出
  • HTML
        • 井陉矿区
      • 衡水
  •                 
                    
                

使用完整的结构树(子节点)

另外一种完整结构树的写法是将元素节点以rep属性的形式定义,可用的属性如下:

  • rep=label,label节点,其textContent将作为label值
  • rep=icon,icon节点,其class值将作为icon值
  • rep=disk,圆形图片节点,其src值将作为disk值
  • rep=cube,方形图片节点,其src值将作为cube值
  • rep=tips,提示文字节点,其textContent将作为tips值
  • rep=badge,徽章节点,其textContent将作为badge值
  • rep=custom,用户自定义内容节点

注意,可以使用ax-badge自定义组件代替rep=badge

另外,如有需要,可将brief节点写在第一个节点后面并且使用_tree-brief样式类。

  • 输出
  • HTML
    • 河北
      河北省(Hebei Province),简称“冀”,中华人民共和国省级行政区,省会石家庄
      • 石家庄
        • 长安区
        • 桥西区
        • 新华区
        • 裕华区
          裕华区,隶属河北省石家庄市。地处河北省中南部平原,石家庄市区东南部,西邻建设大街、汇通路与桥西区接壤,东与藁城区为邻。
        • 井陉矿区
      • 邢台708万人
      • 邯郸936万人
      • 保定919万人
      • 衡水418万人
    • 四川13
      • 成都2119万人
      • 南充556万人
      • 绵阳488万人
    • 广西2
      • 南宁883万人
      • 柳州417万人
    • 江西883万人
  •