@npmcorp/pui-react-tabs

React components for tab-based content toggling

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
63924Jun 11, 2021May 16, 2014Minified + gzip package size for @npmcorp/pui-react-tabs in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.