索引

• 概述

概述

面包屑导航(ht.ui.Breadcrumb) 用于显示一个导航条，告知用户当前所处的位置，以及响应用户点击操作跳转到新位置；此组件中从左到右排列一组导航按钮，按钮通过 setItems 配置：

breadcrumb.setItems([
    {
        icon: 'icon',
        hoverIcon: 'hoverIcon',
        acctiveIcon: 'activeIcon'
        text: '首页'
    },
    {
        icon: 'icon',
        text: '资产管理'
    },
    {
        icon: 'icon',
        text: '资产录入'
    }
]);

items 设置完以后，可以用下面两个函数进行修改：

• truncate(index) 删掉指定位置之后的导航按钮
• addItem(item, index) 在指定的位置插入一个导航按钮

此组件上提供了一些参数用于控制导航按钮的样式(通过 get/set 取值和设值)：

• itemGap 导航按钮之间间距
• separator 导航按钮之间的分割符，可以是颜色、图片等，内部自动转换为 Drawable 对象再绘制
• separatorDrawable 导航按钮之间的分割符 Drawable
• separatorWidth 分隔符宽度
• separatorHeight 分隔符高度
• itemBackground 导航按钮背景，可以是颜色、图片等，内部自动转换为 Drawable 对象再绘制
• itemBackgroundDrawable 导航按钮背景 Drawable
• hoverItemBackground hover 状态的导航按钮背景，可以是颜色、图片等，内部自动转换为 Drawable 对象再绘制
• hoverItemBackgroundDrawable hover 状态的导航按钮背景 Drawable
• activeItemBackground active 状态的导航按钮背景，可以是颜色、图片等，内部自动转换为 Drawable 对象再绘制
• activeItemBackgroundDrawable active 状态的导航按钮背景 Drawable
• selectItemBackground select 状态的导航按钮背景，可以是颜色、图片等，内部自动转换为 Drawable 对象再绘制
• selectItemBackgroundDrawable select 状态的导航按钮背景 Drawable
• itemTextColor 导航按钮文本颜色
• hoverItemTextColor hover 状态的导航按钮文本颜色
• activeItemTextColor active 状态的导航按钮文本颜色
• selectItemTextColor select 状态的导航按钮文本颜色
• itemTextFont 导航按钮文本字体
• itemIconWidth 导航按钮图标宽度
• itemIconHeight 导航按钮图标高度
• itemIconTextGap 导航按钮中图标和文本之间的距离
• itemPadding 导航按钮的内边距，支持数字和数组格式

上面例子中第二个导航设置了内置样式：

breadcrumb.setStyle('breadcrumb-arrow');

并且监听了导航按钮的选中事件，裁掉当前选中的导航按钮之后的按钮：

breadcrumb.on('p:selectItemIndex', function (e) {
    breadcrumb.truncate(e.newValue);
});

最底部的按钮演示了如何增加导航按钮：

button.on('click', function (e) {
    if (!window.counter) window.counter = 0;
    breadcrumb.addItem({
        text: 'New Item ' + window.counter++
    })
});