polestar-ui-kit
Version:
## Install
74 lines (67 loc) • 2.1 kB
Markdown
Menu component example:
[Ant Menu API](https://ant.design/components/menu/)
```jsx static
import React from 'react';
import { Menu } from 'polestar-ui-kit';
/**
* Menu items 데이터 구조
* [
* {
* label: 'label',
* icon: 'icon',
* path: 'path',
* link: 'link',
* target: '_blank',
* disabled: true,
* children: [],
* custom1: '',
* custom2: '',
* }
* ]
*/
const menuItems = [
{ label: 'Home', path: '' },
{ label: 'Menu1', path: '', disabled: true },
{ label: 'Menu2', path: '' },
{ label: 'Menu3', path: '', children: [
{ label: 'Menu3-1', path: '' },
{ label: 'Menu3-2', path: '', children: [
{ label: 'Menu3-2-1', path: '' },
{ label: 'Menu3-2-2', path: '' },
] },
] },
{ label: 'Menu4', path: '', children: [
{ label: 'Menu4-1', path: '', disabled: true },
{ label: 'Menu4-2', path: '' },
{ label: 'Menu4-3', path: '' },
{ label: 'Menu4-4', path: '', children: [
{ label: 'Menu4-4-1', path: '' },
{ label: 'Menu4-4-2', path: '' },
{ label: 'Menu4-4-3', path: '', children: [
{ label: 'Menu4-4-3-1', path: '' },
{ label: 'Menu4-4-3-2', path: '' },
] },
{ label: 'Menu4-4-4', path: '', children: [
{ label: 'Menu4-4-4-1', path: '' },
{ label: 'Menu4-4-4-2', path: '', children: [
{ label: 'Menu4-4-4-2-1', path: '' },
{ label: 'Menu4-4-4-2-2', path: '' },
] },
] },
] },
] },
];
class MyComponent extends React.Component {
onClick = (e, item, itemPaths) => {
console.log('Menu onClick', e);
console.log('Menu onClick', item);
console.log('Menu onClick', itemPaths);
}
render() {
return (
<Menu items={menuItems} onClick={this.onClick} />
);
}
}
export default MyComponent;
```