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'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
### 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.