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 ="First Tab"> First tab contents here </div> <YourComponent ="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 ="stretch"> <div ="First Tab"> First tab contents here </div> <YourComponent ="Second Tab"> Content for second tab here </YourComponent></TabPanel>
Possible tabAlign
values:
start
center
end
stretch
space-around
space-between
Disabled tabs:
<TabPanel => <div ="First Tab" = > First tab contents here </div> <YourComponent ="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.
tabProps
Using 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 => <div = > First tab contents here </div> <YourComponent = > Content for second tab here </YourComponent></TabPanel>
TabStrip
Using the import TabPanel TabStrip from 'react-tab-panel' <TabPanel => <TabStrip = /> <div ="First tab here"> First tab contents here </div> <YourComponent ="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 = => <TabStrip = /> <div ="First Tab"> First tab contents here </div> <YourComponent ="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 = 1let { ... } const tabs = 'First tab' <b>second tab</b><TabStrip = = =/>
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 => <div ="First tab"> Lorem ipsum Nisi fugiat ut nulla consectetur reprehenderit </div> <YourComponent ="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 filesimport 'react-tab-panel/index.css' //for the default look //the css import above is equivalent toimport '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 ="flat" ... />
Available themes:
default
red
flat
License
Commercial license required - copyright Zippy Technologies
For details, email us at contact at zippyui dot com