0.0.23 • Published 5 years ago
@t7/tabs v0.0.23
@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">
0.0.23
5 years ago
0.0.22
5 years ago
0.0.21
5 years ago
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.13
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago
0.0.0
6 years ago