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.