let items = [{
title: 'Fruits',
key: 'fruits',
submenu: [{
subtitle: 'Apple',
key: '1.1',
onClick: listener,
href: '#apple',
iconClass: 'glyphicon icon-overview',
selected: true
}, {
subtitle: 'Strawberry',
key: '1.2',
onClick: listener,
href: '#strawberry',
iconClass: 'glyphicon icon-overview'
}]
}, {
title: 'Vegetables',
key: 'vegetables',
fold: true,
submenu: [{
subtitle: 'Potato',
key: '2.1',
onClick: listener,
href: '#potato',
iconClass: 'glyphicon icon-overview'
}, {
subtitle: 'Eggplant',
key: '2.2',
onClick: listener,
href: '#eggplant',
iconClass: 'glyphicon icon-overview'
}]
}];
ReactDOM.render(<Menu width={300} items={items}/>, document);
name | type | default | description |
---|---|---|---|
items | Array | 见下方items详解 |
items
name | type | default | description |
---|---|---|---|
title | String | 每个子菜单的title | |
key | String | 每个子菜单的key值 | |
fold | Boolean | 每个子菜单的key值 | |
submenu | Array | 每个子菜单的列表信息,见下方详解 |
items: { submenu:[] }
name | type | default | description |
---|---|---|---|
subtitle(必填) | String | 每个子列表的title | |
key(必填) | String | 每个子列表的key值 | |
onClick | Function | 子列表的click事件 | |
href | String | 设置href值 | |
iconClass | String | 设置submenu的icon的class值 | |
selected | Boolean | 设置是否为selected状态 |
GitHub
Copyright © 2017 MIT License