0.11.6 • Published 6 years ago
@trendmicro/react-navs v0.11.6
react-navs
React Navs
Demo: https://trendmicro-frontend.github.io/react-navs
Installation
Install the latest version of react and react-navs:
npm install --save react @trendmicro/react-navs
At this point you can import
@trendmicro/react-navs
and its styles in your application as follows:import { Nav, NavItem, NavDropdown, // optional MenuItem, // optional TabContent, TabPane } from '@trendmicro/react-navs'; // Be sure to include styles at some point, probably during your bootstraping import '@trendmicro/react-navs/dist/react-navs.css'; // [Optional] Include react-dropdown.css when using NavDropdown import '@trendmicro/react-dropdown/dist/react-dropdown.css'
Usage
Tabs
<Nav
navStyle="tabs"
activeKey={this.state.activeTab}
onSelect={(eventKey, event) => {
this.setState({ activeTab: eventKey });
}}
style={{
borderBottomColor: 'transparent' // Make a transparent bottom border
}}
>
<NavItem eventKey={1}>Item 1</NavItem>
<NavItem eventKey={2}>Item 2</NavItem>
<NavItem eventKey={3}>Item 3</NavItem>
<NavDropdown eventKey={4} title="NavItem 4">
<MenuItem eventKey={4.1}>Action</MenuItem>
<MenuItem eventKey={4.2}>Another action</MenuItem>
<MenuItem divider />
<MenuItem eventKey={4.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<TabContent activeKey={this.state.activeTab}>
<TabPane eventKey={1}>Tab 1 content</TabPane>
<TabPane eventKey={2}>Tab 2 content</TabPane>
<TabPane eventKey={3}>Tab 3 content</TabPane>
<TabPane eventKey={4.1}>Tab 4.1 content</TabPane>
<TabPane eventKey={4.2}>Tab 4.2 content</TabPane>
<TabPane eventKey={4.3}>Tab 4.3 content</TabPane>
</TabContent>
Light Tabs
<Nav
navStyle="light-tabs"
activeKey={this.state.activeTab}
onSelect={(eventKey, event) => {
this.setState({ activeTab: eventKey });
}}
>
<NavItem eventKey={1}>Item 1</NavItem>
<NavItem eventKey={2}>Item 2</NavItem>
<NavItem eventKey={3}>Item 3</NavItem>
<NavDropdown eventKey={4} title="NavItem 4">
<MenuItem eventKey={4.1}>Action</MenuItem>
<MenuItem eventKey={4.2}>Another action</MenuItem>
<MenuItem divider />
<MenuItem eventKey={4.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<TabContent activeKey={this.state.activeTab}>
<TabPane eventKey={1}>Tab 1 content</TabPane>
<TabPane eventKey={2}>Tab 2 content</TabPane>
<TabPane eventKey={3}>Tab 3 content</TabPane>
<TabPane eventKey={4.1}>Tab 4.1 content</TabPane>
<TabPane eventKey={4.2}>Tab 4.2 content</TabPane>
<TabPane eventKey={4.3}>Tab 4.3 content</TabPane>
</TabContent>
Panel Tabs
<Nav
navStyle="panel-tabs"
activeKey={this.state.activeTab}
onSelect={(eventKey, event) => {
this.setState({ activeTab: eventKey });
}}
>
<NavItem eventKey={1}>Item 1</NavItem>
<NavItem eventKey={2}>Item 2</NavItem>
<NavItem eventKey={3}>Item 3</NavItem>
<NavDropdown eventKey={4} title="NavItem 4">
<MenuItem eventKey={4.1}>Action</MenuItem>
<MenuItem eventKey={4.2}>Another action</MenuItem>
<MenuItem divider />
<MenuItem eventKey={4.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<TabContent activeKey={this.state.activeTab}>
<TabPane eventKey={1}>Tab 1 content</TabPane>
<TabPane eventKey={2}>Tab 2 content</TabPane>
<TabPane eventKey={3}>Tab 3 content</TabPane>
<TabPane eventKey={4.1}>Tab 4.1 content</TabPane>
<TabPane eventKey={4.2}>Tab 4.2 content</TabPane>
<TabPane eventKey={4.3}>Tab 4.3 content</TabPane>
</TabContent>
API
Properties
Nav
Name | Type | Default | Description |
---|---|---|---|
activeHref | string | Marks the child NavItem with a matching href prop as active. | |
activeKey | any | Marks the NavItem with a matching eventKey as active. Has a higher precedence over activeHref . | |
navStyle | One of:'tabs''light-tabs''panel-tabs''navbar' | 'tabs' | Component visual or contextual style variants. |
justified | boolean | false | Make tabs equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked. |
stacked | boolean | false | Position NavItem vertically. |
onSelect | function(eventKey, event) | A callback fired when a NavItem is selected. | |
role | string | ARIA role for the Nav. |
NavItem
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Highlight the nav item as active. |
disabled | boolean | false | Whether or not component is disabled. |
eventKey | any | Value passed to the onSelect handler, useful for identifying the selected nav item. | |
href | string | ||
onClick | function(event) | Callback fired when the nav item is clicked. | |
onSelect | function(eventKey, event) | Callback fired when the nav item is selected. | |
role | string | ARIA role for the NavItem. |
NavDropdown
Name | Type | Default | Description | |
---|---|---|---|---|
componentClass | string | component | A custom element for this component | |
dropup | boolean | false | The menu will open above the dropdown button, instead of below it. | |
disabled | boolean | false | Whether or not component is disabled. | |
pullRight | boolean | false | Align the menu to the right side of the NavDropdown toggle. | |
open | boolean | false | Whether or not the dropdown is visible. | |
onClose | function(event) | A callback fired when the dropdown closes. | ||
onToggle | function(boolean) | A callback fired when the dropdown wishes to change visibility. Called with the requested open value. | ||
onSelect | function(eventKey, event) | A callback fired when a menu item is selected. | ||
role | string | If 'menuitem' , causes the dropdown to behave like a menu item rather than a menu button. | ||
rootCloseEvent | One of:'click''mousedown' | Which event when fired outside the component will cause it to be closed. | ||
active | boolean | false | Highlight the nav dropdown as active. | |
title | node | |||
noCaret | boolean | false | Whether to prevent a caret from being rendered next to the title. |
MenuItem
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Highlight the menu item as active. |
disabled | boolean | false | Disable the menu item, making it unselectable. |
divider | boolean | false | Style the menu item as a horizontal rule, providing visual separation between groups of menu items. |
eventKey | any | Value passed to the onSelect handler, useful for identifying the selected menu item. | |
header | boolean | false | Style the menu item as a header label, useful for describing a group of menu items. |
href | string | HTML href attribute corresponding to a.href . | |
onClick | function(event) | Callback fired when the menu item is clicked. | |
onSelect | function(eventKey, event) | Callback fired when the menu item is selected. |
TabContent
Name | Type | Default | Description |
---|---|---|---|
activeKey | any |
TabPane
Name | Type | Default | Description |
---|---|---|---|
eventKey | any | ||
lazy | boolean | false | If true , the TabPane will be unmounted when inactive. |
License
MIT
0.11.6
6 years ago
0.11.5
6 years ago
0.11.4
6 years ago
0.11.3
6 years ago
0.11.2
6 years ago
0.11.1
6 years ago
0.11.0
6 years ago
0.10.1
7 years ago
0.10.0
7 years ago
0.9.2
7 years ago
0.9.1
7 years ago
0.9.0
7 years ago
0.8.6
7 years ago
0.8.5
7 years ago
0.8.4
7 years ago
0.8.3
7 years ago
0.8.2
7 years ago
0.8.1
7 years ago
0.8.0
7 years ago
0.7.1
7 years ago
0.7.0
7 years ago
0.6.1
7 years ago
0.6.0
7 years ago
0.5.0
7 years ago