@beisen/tita-sidebar

iTalent sidebar

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen/tita-sidebar
Minified + gzip package size for @beisen/tita-sidebar in KB

Readme

左侧导航组件

简介

iTalent通用侧边栏

2. 使用

初始化

model = {
    "id":124                       // Number、required、unique
    ,"title":"快速入口"              // String、required
    ,"href":"?iTalentNavId=157"       // String、required
    ,"iconName":"sys-icon-star"    // String、required
    ,"type":"hash"                 // String、required
    ,"orderId":2                   // Number、required、unique
    ,"code":'home'                 // String
    ,"appId":1                     // Number、required
    ,"status":0                       // Number
    ,isQuickEntry: true            // Boolean、required
    ,"children":[]                 // Array
}
this.pageJson = {
    menuArry:[
                {
                    "id":567890
                    ,"title":"快速入口"
                    ,"href":"?iTalentNavId=157"
                    ,"iconName":"sys-icon-star"
                    ,"type":"hash"
                    ,"orderId":2
                    ,"code":'tita-home'
                    ,"appId":1
                    ,"status":0
                    ,isQuickEntry: true
                    ,"children":[model, model...]
                },
                {
                    "id":567890
                    ,"title":"快速入口"
                    ,"href":"?iTalentNavId=157"
                    ,"iconName":"sys-icon-star"
                    ,"type":"hash"
                    ,"orderId":2
                    ,"code":"tita-activity"
                    ,"appId":1
                    ,"status":0
                    ,isQuickEntry: false
                    ,"children":[]
                }

            ]
}

this.sidebar = new SideBar(this.pageJson);

sidebar className

    报表:sys-icon-baobiao
    动态:sys-icon-dongtai
    工作:sys-icon-gongzuo
    工作台:sys-icon-gongzuotai
    计划:sys-icon-jihua
    绩效:sys-icon-jixiao
    考核:sys-icon-kaohe
    目标:sys-icon-mubiao
    ocean:sys-icon-ocean
    日报:sys-icon-ribao
    首页:sys-icon-souye
    同事:sys-icon-tongshi
    文件:sys-icon-wenjian
    项目:sys-icon-xiangmu
    仪表盘:sys-icon-yibiao
    应用:sys-icon-yingyong
    招聘:sys-icon-zaopin
    职业:sys-icon-zhiye

    // 另外在fonts目录下添加了preview目录,方便查看目前左侧导航可用的所有图标
  • 监听事件
//监听导航切换宽窄条事件
this.listenTo(this.sidebar,"layoutChanged",function(resp){
    //console.log(resp)
});

//监听点击导航事件
this.listenTo(this.sidebar,"hashChanged",,function(resp){
    //console.log(resp)
});
  • 获得导航的宽度
    var menuWidth = this.sidebar.getWidth()
  • 提示功能与初始高亮功能
var countData = [
    "#home"
    ,"#test"
    ,"#test1"
];

    //导航提示,根据hash来判断哪个导航处于提示状态

this.sidebar.updateNewCount(countData);

//导航高亮,含有二级数据的一级导航高亮无效

- 页面首次加载,定制高亮导航
    // id 和 code 必须有一个非空,且高亮优先级code > id
    this.sidebar.highLightSet({"id":150,"code":null});

- 页面首次加载,不定制高亮
    this.sidebar.highLightSet({"id":'',code:''})
  • 刷新指定的导航 (可用与更新红点提示)
    var menuItem = {
        "id":124
        ,"title":"快速入口"
        ,"href":"?iTalentNavId=157"
        ,"iconName":"sys-icon-star"
        ,"type":"hash"
        ,"orderId":2
        ,"code":'home'
        ,"appId":1
        ,"status":0
        ,isQuickEntry: true
        ,"children":[]
    }
   this.sidebar.menuItemReload(menuItem)

1.版本

v0.3.2

  • 解决快速入口中配置一级导航时,点击高亮错误的bug

v0.3.1

  • 添加底部阴影

v0.3.0

  • 添加【快速入口】功能
  • 导航高度调整
    • 一级导航高度有50px调整为44px
    • 二级导航高度有40px调整为34px
  • 更新组件的iconfont
    • 添加新图标
    • 在font/v*目录下添加preview目录,方便预览所有导航支持的图标

v0.2.24

  • 2017年2月之前线上版本

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.