1.1.3 • Published 5 years ago
sto-navigation v1.1.3
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