Skip to main content
react-md
react-md - Tabs - Demos

Tabs

Tabs allow you to organize content across different screens, data sets, and other interactions. The @react-md/tabs package provides a bunch of components to help create accessible tabs, but here's a list of the most important components:

  • TabsManager - The main wrapper component for all the Tabs. You must provide a tabsId, a list of tab configuration, and optional settings for your tabs. You'll need to ensure that this component is a parent of all the next components.
  • Tabs - This component will render all the tabs from the TabsManager component ensuring correct keyboard accessibility and updating tabs to be active when needed.
  • TabPanels - This component is a wrapper for the TabPanel component that manages switching out the active TabPanel as needed and animating these panels in and out of view. It will also reset scrolling when the tab has changed. The children for this component must be the TabPanel component without any conditional rendering. This component will clone in the required id and aria-* props into the child TabPanel that is active.
  • TabPanel - The final component that creates an accessible tabpanel widget that links to a Tab within the Tabs component with the aria-labelledby attribute.

The Tabs component will also allow the user to navigate through tabs with the left and right arrow keys and optionally auto-select the tabs. Check out the demos below to see example usage and explanations for the TabPanels/TabPanel components.

Basic Usage

As stated above, you'll want to use the TabsManager, Tabs, TabPanels, and TabPanel components to render your general tab layout. For each tab within the tabs list, you'll need to have a matching TabPanel in the TabsPanel component.

Panel 1

Simple Two Page Tab

Even though you'll normally use the tab components together, you don't actually need to use them all within the same component. You can move the Tabs into a custom header with the AppBar or even move the content into separate components to render complex data. The only requirement still is that the TabPanels must only have children of TabPanel.

Check out the example below for separated components as well as adding icons to the tabs.

My pictures

Persistent Tabs

One of the downsides about the default behavior for tabs is that when a tab is not currently active, it will be removed from the DOM. This means that if your component fetches data or has local state, it will be reset once the tab becomes inactive. This means that if you want to maintain state between the tabs, you'll need to move the state up above the TabPanels component and pass it down to your panels instead.

Since this isn't always ideal, you can also enable the persistent flag which will always render all the tab panels and apply the hidden attribute for inactive tabs so they can't be tab focusable.

Tab 1 Content

Configurable Tabs

Unlike most of the components within react-md, tabs actually done have their own theme. This is really because tabs are generally rendered in AppBars or inline with other content on the page. If you want to apply your own theme, it's as simple as adding a background-color and optionally updating the indicator's background color of the primary theme color is not visible on the new background.

This example below will allow you to configure the tabs with a few different options as well as show how you can define your own custom theme and updating the indicator color with rmd-tabs-theme-update-var mixin.

Tabs Options
Icon Options
Tab Panel Options

Panel 1