2.0.21 • Published 6 years ago
the-menu v2.0.21
the-menu
Menu of the-components
Installation
$ npm install the-menu --save
Usage
Live Demo is hosted on GitHub Page
'use strict'
import React from 'react'
import { TheMenu, TheDropdownMenu, TheMenuStyle } from 'the-menu'
import { TheRouter } from 'the-router'
class ExampleComponent extends React.PureComponent {
render () {
const s = this
const ExampleMenu = ({grid = false}) => (
<TheMenu grid={grid}>
<TheMenu.Item icon='fa fa-support' text='Help' to='/help'/>
<TheMenu.Item icon='fa fa-info-circle' text='About' to='/about'/>
<TheMenu.Item icon='fa fa-sign-out' text='Logout' onClick={() => console.log('logout!')}/>
<TheMenu.Item icon='fa fa-sun-o' text='Foo'/>
<TheMenu.Item icon='fa fa-sun-o' text='Bar'/>
<TheMenu.Item icon='fa fa-sun-o' text='Baz'/>
</TheMenu>
)
return (
<div>
<TheRouter.Hash>
<TheMenuStyle/>
<h3>Default Menu</h3>
<div>
<ExampleMenu/>
</div>
<hr/>
<h3>Grid Menu</h3>
<div>
<ExampleMenu grid/>
</div>
<hr/>
<h3>Drop Down</h3>
<TheDropdownMenu label='Try me!'
>
<TheDropdownMenu.Item to='foo'>foo</TheDropdownMenu.Item>
<TheDropdownMenu.Item to='bar'>bar</TheDropdownMenu.Item>
<TheDropdownMenu.Item>baz</TheDropdownMenu.Item>
<TheDropdownMenu.Item to='quz'>quz</TheDropdownMenu.Item>
<TheDropdownMenu.Item>1</TheDropdownMenu.Item>
<TheDropdownMenu.Item>2</TheDropdownMenu.Item>
<TheDropdownMenu.Item>Long Long Long Long Long Text</TheDropdownMenu.Item>
</TheDropdownMenu>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</TheRouter.Hash>
</div>
)
}
}
export default ExampleComponent
Components
TheDropDownMenu
Drop down menu
Props
Name | Type | Description | Default |
---|---|---|---|
eventsToClose | arrayOf string | Event types to close for | ['hashchange'] |
label | node | Label for toggle button |
|
open | bool | Open when mounted | false |
righted | bool | Show on righthand | false |
role | 'menu' |
TheMenu
Menu of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
grid | bool | Grid layout | false |
role | 'menu' |
TheMenuItem
Menu of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
active | bool | Active or not | false |
icon | string | Icon class name | null |
to | string | Link to | null |
role | 'menuitem' |
TheMenuStyle
Style for TheMenu
Props
Name | Type | Description | Default |
---|---|---|---|
options | object | Style options | {} |
License
This software is released under the MIT License.
Links
2.0.21
6 years ago
2.0.20
6 years ago
2.0.19
6 years ago
2.0.18
6 years ago
2.0.17
6 years ago
2.0.16
6 years ago
2.0.15
6 years ago
2.0.14
6 years ago
2.0.13
6 years ago
2.0.12
6 years ago
2.0.11
6 years ago
2.0.10
6 years ago
2.0.9
6 years ago
2.0.8
6 years ago
2.0.7
6 years ago
2.0.6
6 years ago
2.0.5
6 years ago
2.0.4
6 years ago
2.0.3
6 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
7 years ago
1.2.3
7 years ago
1.2.2
7 years ago
1.2.1
7 years ago
1.2.0
7 years ago
1.1.3
7 years ago
1.1.2
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago