react-tab-panel v2.2.7
react-tab-panel
Carefully crafted tabs for React
Docs
Visit the docs site at zippyui.com/docs/react-tab-panel
Install
$ npm install --save react-tab-panel
Coming soon - scrollable tabs
Usage
import TabPanel from 'react-tab-panel'
import 'react-tab-panel/index.css'
<TabPanel>
<div tabTitle="First Tab">
First tab contents here
</div>
<YourComponent tabTitle="Second Tab">
Content for second tab here
</YourComponent>
</TabPanel>
Examples
For brevity, we are not showing the import
statements in the examples below (with a few exceptions, where appropriate)!
Stretching tabs:
<TabPanel tabAlign="stretch">
<div tabTitle="First Tab">
First tab contents here
</div>
<YourComponent tabTitle="Second Tab">
Content for second tab here
</YourComponent>
</TabPanel>
Possible tabAlign
values:
start
center
end
stretch
space-around
space-between
Disabled tabs:
<TabPanel activeIndex={1}>
<div
tabTitle="First Tab"
tabProps={{disabled: true}}
>
First tab contents here
</div>
<YourComponent tabTitle="Second Tab">
Content for second tab here
</YourComponent>
</TabPanel>
For disabled tabs, just specify tabProps={{disabled: true}}
on the component you want to show as disabled.
Using tabProps
As an alternative to tabTitle
, you can use tabProps
, which should be an object with at least the title
property.
You can use this property to pass in any custom props to tab titles
<TabPanel activeIndex={1}>
<div
tabProps={{title:'First tab here'}}
>
First tab contents here
</div>
<YourComponent
tabProps={{
title: 'Second Tab',
disabled: true,
onClick: (e) => console.log(e)
}}
>
Content for second tab here
</YourComponent>
</TabPanel>
Using the TabStrip
import TabPanel, { TabStrip } from 'react-tab-panel'
<TabPanel activeIndex={1}>
<TabStrip
style={{padding: 10}}
/>
<div tabTitle="First tab here">
First tab contents here
</div>
<YourComponent tabTitle="Second Tab">
Content for second tab here
</YourComponent>
</TabPanel>
Structure
*-------------------*
| Tab Strip |
*-------------------*
| |
| Tab Body |
| |
*-------------------*
The TabPanel
is built of a TabStrip
and a TabBody
.
TabStrip
The TabStrip basically renders the tabs at the top (or bottom) of the component.
By default, when rendering a TabPanel
you don't have to render a TabStrip
explicitly. However, doing so gives you greater flexibility in configuring and positioning it.
Example, with TabStrip
import TabPanel, { TabStrip } from 'react-tab-panel'
<TabPanel
activeIndex={x}
onActivate={onActivate}
>
<TabStrip style={{padding: 20}} />
<div tabTitle="First Tab">
First tab contents here
</div>
<YourComponent tabTitle="Second Tab">
Content for second tab here
</YourComponent>
</TabPanel>
The TabPanel
detects you are using the TabStrip
inside it, and won't render it as a tab, instead, you can configure it's style and other props.
You can even use the TabStrip
in isolation, without the TabPanel
:
import { TabStrip } from 'react-tab-panel'
let x = 1
let onActivate = (newIndex) => { ... }
const tabs = [
'First tab',
<b>second tab</b>
]
<TabStrip
tabs={tabs}
activeIndex={x}
onActivate={onActivate}
/>
Configuration
If you are using the TabStrip
as a standalone component, you can specify the following props:
tabs: Array
- an array of ReactNode elements, which will be the tab titlesactiveIndex
- the index of the tab to render as active. Controlled prop!defaultActiveIndex
- uncontrolled version ofactiveIndex
onActivate: Function(index)
- function to be called when a new tab is clicked & activated.
TabBody
Renders the active tab contents.
You can include a TabBody
inside your TabPanel
to configure how the current tab content is rendered.
Example:
import TabPanel, { TabBody, TabStrip } from 'react-tab-panel'
<TabPanel>
<TabBody style={{padding: 100}}>
<div tabTitle="First tab">
Lorem ipsum Nisi fugiat ut nulla consectetur reprehenderit.
</div>
<YourComponent tabTitle="Second"/>
</TabBody>
<TabStrip />
</TabPanel>
The TabPanel
will detect you are using a TabBody
inside, and will use its children as tabs, and not the children of the TabPanel
.
You can even use a TabStrip
and include it after the TabBody
as an alternative way of configuring the tabPosition
to 'bottom'
Configuration
renderContent: Function
- a function that gets passed the content to render in theTabBody
. You can use this to add some nesting and/or custom styling, etc.
The TabBody
accepts any other normal JSX
props. Eg: onClick
, style
, className
, etc
Styling
It's default className will be 'react-tab-panel__body'
. If you configure it with another className, it will use both yours and the default value.
Configuration
children
withtabTitle
prop as tabstabPosition
-'top'
or'bottom'
are possible values. By default theTabPanel
will render tabs at the top.
Theming
For the default look&feel, just import react-tab-panel/index.css
, which includes the structural styles as well as the default theme.
If you want to use only the structural styles, make sure you only include react-tab-panel/base.css
and then add your own custom theme on top of those styles.
import TabPanel from 'react-tab-panel'
//now import the css files
import 'react-tab-panel/index.css' //for the default look
//the css import above is equivalent to
import 'react-tab-panel/base.css'
import 'react-tab-panel/theme/default.css'
If you want to show the TabPanel
with another theme, don't forget to also specify the theme
prop on the component:
<TabPanel theme="flat" ... />
Available themes:
default
red
flat
License
Commercial license required - copyright Zippy Technologies
For details, email us at contact at zippyui dot com
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago