node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

@npmcorp/pui-react-tabs

pui-react-tabs

React components for tab-based content toggling

Pivotal UI React (GitHub, npm) is a collection of React components for rapidly building and prototyping UIs.

This component requires React v0.13

See the Pivotal UI Styleguide for fully rendered examples.

Components

SimpleTabs

Tab-based content toggling

var SimpleTabs = require('
 
#### Properties
 
- `responsiveBreakpoint`
  - `one of: `"xs"`, `"sm"`, `"md"`, `lg``: The
size at which the small-screen tabs (accordion-style) should switch to
large-screen tabs (folder-style)
 
- `defaultActiveKey`
  - `should equal one of your tab'event keys`: The
tab which will start out open
 
`smallScreenClassName`
  - `css class`: Will be applied to small screen
tabs only
 
`largeScreenClassName`
  - `css class`: Will be applied to large screen
tabs only
 
`onSelect`
  - `function`: Will override default behavior when clicking
on a tab. If you want to retain the default behavior as well as add new
functionality, change default active key in the function you provide
 
 
### SimpleAltTabs
 
`<SimpleTabs>` with different styling
 
```js
var SimpleAltTabs = require('
 
#### Properties
 
- `responsiveBreakpoint`
  - `one of: `"xs"`, `"sm"`, `"md"`, `lg``: The
size at which the small-screen tabs (accordion-style) should switch to
large-screen tabs (folder-style)
 
- `defaultActiveKey`
  - `should equal one of your tab's event keys`: The
tab which will start out open
 
`smallScreenClassName`
  - `css class`: Will be applied to small screen
tabs only
 
`largeScreenClassName`
  - `css class`: Will be applied to large screen
tabs only
 
`onSelect`
  - `function`: Will override default behavior when clicking
on a tab. If you want to retain the default behavior as well as add new
functionality, change default active key in the function you provide
 
 
### LeftTabs
 
Tabs with the nav stacked on the left
 
```js
var LeftTabs = require('
 
#### Properties
 
- `responsiveBreakpoint`
  - `one of: `"xs"`, `"sm"`, `"md"`, `lg``: The
size at which the small-screen tabs (accordion-style) should switch to
large-screen tabs (folder-style)
 
- `defaultActiveKey`
  - `should equal one of your tab's event keys`: The
tab which will start out open
 
`smallScreenClassName`
  - `css class`: Will be applied to small screen
tabs only
 
`largeScreenClassName`
  - `css class`: Will be applied to large screen
tabs only
 
`onSelect`
  - `function`: Will override default behavior when clicking
on a tab. If you want to retain the default behavior as well as add new
functionality, change default active key in the function you provide
 
- `tabWidth`
  - `number`: Takes the number of bs Columns. Optional: the default is 6.
 
- `paneWidth`
  - `number`: Takes the number of bs Columns. Optional: the default is 24 - tabWidth.
 
 
### Tab
 
A container for content in a `<SimpleTabs>` or `<SimpleAltTabs>`
 
 
 
#### Properties
 
- `eventKey`
  - `Number`: An identifier for the tab
 
 
*****************************************
 
(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.