npm package: @npmcorp/pui-react-tabs
Description: React components for tab-based content toggling
Author: Pivotal Software, Inc
Latest version: 8.4.0

# pui-react-tabs

React components for tab-based content toggling

Pivotal UI React ([GitHub](https://github.com/pivotal-cf/pivotal-ui-react), [npm](https://www.npmjs.com/browse/keyword/pivotal%20ui%20modularized)) is a collection of [React](https://facebook.github.io/react/) components for rapidly building and prototyping UIs.

This component requires React v0.13

See the [Pivotal UI Styleguide](http://styleguide.pivotal.io/react.html#tabs_react) for fully rendered examples.

## Components

### SimpleTabs

Tab-based content toggling

```js
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.