Table of Contents
Tabs
Use Tabs to organize related content in a single view. This helps users navigate related content without having to switch contexts.
Used for this
- To filter information into easily parsable views
- To organize related content and controls within a single page
How to use it
Default
The typical usage of a Tab component.
Elm
Sugar Maple
Dogwood
Elms are deciduous and semi-deciduous trees comprising the flowering plant genus Ulmus in the plant family Ulmaceae.
Disabled
Individual tabs can be disabled to prevent users from interacting with them.
Elm
Sugar Maple
Dogwood
Elms are deciduous and semi-deciduous trees comprising the flowering plant genus Ulmus in the plant family Ulmaceae.
Orientation
Tab layout is horizontal by default and can also stack vertically.
Elm
Sugar Maple
Dogwood
Elms are deciduous and semi-deciduous trees comprising the flowering plant genus Ulmus in the plant family Ulmaceae.
Configuration
- Name9.5.1•View source•View on npm
- Installnpm install @zendeskgarden/react-tabs
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Tabs } from '@zendeskgarden/react-tabs'
API
Tabs
Prop name | Type | Default | Description |
---|---|---|---|
isVertical | boolean | false | Arranges the tabs vertically |
onChange | Handles tab selection Parameters selectedItem The selected tab's | ||
selectedItem | any | Specifies the currently selected tab |
Tabs.Tab
Extends HTMLAttributes<HTMLDivElement>
Prop name | Type | Default | Description |
---|---|---|---|
disabled | boolean | Indicates that the element is not interactive | |
item | any | Defines a unique value to identify the tab. Provided to the |
Tabs.TabList
Extends HTMLAttributes<HTMLDivElement>
Tabs.TabPanel
Extends HTMLAttributes<HTMLDivElement>
Prop name | Type | Default | Description |
---|---|---|---|
item | any | Defines a value used to match a tab panel with its associated tab |