Skip to content

Latest commit

 

History

History
205 lines (172 loc) · 7.78 KB

README.md

File metadata and controls

205 lines (172 loc) · 7.78 KB
Raw

react-navs build status Coverage Status

NPM

React Navs

Demo: https://trendmicro-frontend.github.io/react-navs

Installation

  1. Install the latest version of react and react-navs:
npm install --save react @trendmicro/react-navs
  1. 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
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