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