sto-navigation

快速使用

• $ npm install sto-navigation --save

import Navigation from 'sto-navigation';

const dataSource = [
    { title: '首页', link: '#/home' },
    { title: '人员管理', link: '#/emp-manager', children: [
        { title: '绩效管理', link: '#/emp-manager/kpi' },
        { title: '薪资管理', link: '#/emp-manager/salary' },
    ]},
];

ReactDOM.render(
    <Navigation dataSource={dataSource} defaultActiveKey="#/emp-manager/salary" />,
    mountNode,
);

API

| props | desc | type | required | default | | ---------------- | ------------------------------------- | ----- | -------- | ---------- | | dataSource | 导航主配置 | array | yes | [] | | defaultActiveKey | 初始化时默认选中的节点的 key，单选 | any | no | null | | activeKey | 当前选中的节点的 key，单选 | any | no | -- | | onItemClick | 菜单选中的方法 | func | no | noop | | quickSource | 快捷入口配置 | array | no | -- | | quickTitle | 快捷入口标题，默认是 "快捷入口" | node | no | '快捷入口' | | onQuickClick | 快捷入口点击事件 | func | no | noop | | onExpandChange | 导航栏展开/收起事件, 入参表示是否收起 | func | no | noop | | footer | 导航栏底部，用于自定义底部内容 | node | no | null |

dataSource 数据格式

export const dataSource = [{
    // 菜单名称
    title: 'AAAA',
    key: '1001', // [可选] 菜单项的唯一ID
    // 菜单点击链接，如果没有 key，link 也作为菜单唯一的 key
    link: '链接', 
    // 图标 class，默认取 @alifd/theme-sto 中的 Icon 组件的 type 值，
    //     如果是 .xxx.xx 则会渲染成 <i className={icon}"></i>
    //     如果是一个图片 URL，则会渲染成 <img src={icon} />
    icon: 'home', 
    // [可选] 菜单文字后的徽标，可以是 'orange'|'red'|'green' 或一个图片 URL
    badge: 'orange', 
    // [可选] 如果为 true，则降低菜单透明度
    hidden: false,
    // [可选] 如果为 true, 则不显示菜单 
    hidden: false,
    // [可选] 链接的 target 属性，默认是 _self
    target: '',
    children: [ // [可选] 子菜单列表
        // title, link, icon, badge, hidden, disabled 同父菜单
        { title: 'AAA', link: '#/aaaa' , icon: ''},
    ]
}];

quickSource 数据格式

quickSource 的数据格式字段同 dataSource，但只取: title, link, target 字段

可定制的 SASS 变量

$navigation-bg-color: #525252 !default;
$navigation-text-color: #ffffff !default;
$navigation-text-size: 14px !default;
$navigation-item-hover: #464646 !default;
$navigation-width: 200px !default;
$navigation-item-height: 40px !default;
$navigation-submenu-width: $navigation-width - 40px !default;
$navigation-submenu-bg-color: #ffffff !default;
$navigation-submenu-text-color: #333333 !default;
$navigation-submenu-hover: #F4F4F4 !default;
$navigation-submenu-shadow: 1px 0 3px rgba(0,0,0,.1) !default;

LICENSE

BSD License