Top
TabPanel - Getting started
TabPanel
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <TabPanel /> component, all you need to import is React and the code + styles of the component itself: @zippytech/react-toolkit/TabPanel and @zippytech/react-toolkit/TabPanel/index.css.
This is the most basic setup for a TabPanel. In the following sections we'll explore how to use the TabPanel in various scenarios, supported props, theming, etc.
By default, the <TabPanel /> does not activate a tab on keyboard navigation, since activateOnFocus is false by default. Below you can find an example with activateOnFocus=true.
By default, the <TabPanel /> accomodates in size to fit its contents. However, you can size it to a fixed size or put in a flexbox layout in order to flex and fill the available space.
You can use onActivate(index) to be notified when the active tab changes. NOTE: in the case of controlled activeIndex, when the user clicks a tab title and onActivate(index) is triggered, you have to explicitly update the value for activeIndex in order to reflect the new active tab. If you don't want to manage this, use the uncontrolled defaultActiveIndex
By default, tab titles are sized to fit their contents, so they generally do not overflow. If you wish to have a fixed size for all tabs, use tabStyle={{ width: 200 }} (200px for example) order to force them to overflow. Also use tabEllipsis=true in order to show ellipsis for overflowing tabs (NOTE: ellipsis is displayed only if you're specifying a String as a tab title - otherwise you have to implement ellipsis yourself).
Each tab can be customized using the tabProps property. In the tabProps you can add a tab title, mark the tab as disabled the tab or add an onClick callback for when the tab title is clicked.
By default, the tab content is wrapped into a container which will flex to fill the size given by the tab panel or the parent node of the <TabPanel />. This means that the content will not necessarily be as large or as tall as the wrapper. To force the content to have the size of the wrapper, set stretchTabContent=true.
scrollTabContent prop will make the content of the tab panel to show scrollbars, and not the <TabPanel /> component wrapper.