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.

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).

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.