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