Package Exports

@t7/tabs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@t7/tabs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@t7/tabs

Create a React tab compoent and related panel content from a single formatted structure

Installation

npm install @t7/tabs --save

Usage

import Tabs, { TabPanel } from '@t7/tabs'
import '@t7/tabs/dist/index.css'

/* create a "handler" if your appliction requires additional processing when tabs are selected */
const handleClick = (e, index, label) => {
  <do something interesting>

  /*
    `e` is the event,
    'index' is the index of the tab in the order declared,
    `label` is the text itself.
  */
}

.
.
.

/* create your tabs as a single logical grouping */
<Tabs selected={0} handleClick={handleClick}>
  <TabPanel label='Tab 1'>
    <p>
      Tab content for Tab 1
    </p>
  </TabPanel>
  <TabPanel label='Tab 2'>
    <p>
      Tab content for Tab 2
    </p>
  </TabPanel>
  <TabPanel label='Tab 3'>
    <p>
      Tab content for Tab 3
    </p>
  </TabPanel>
</Tabs>

Note regarding the use of the required CSS

*if your build process will not resolve the CSS in a module copy the file @t7/tabs/dist/index.css from the node_modules folder and reference the copy with an HTML link *

e.g.
<link rel="stylesheet" type="text/css" href="<your stylesheet folder>/@t7/tabs/dist/index.css">