Tablist Preview
A tablist is a group of headers, or tabs, that lets people navigate between different views of related information without going to different pages.
Tablists are great for fitting a lot of information in a small space. They can help reduce scrolling by chunking related information into categories for easier processing. Don't use tablists if it's helpful for people to compare information from two different views.
Properties
appearance
A tab list can supports ‘transparent’ and ‘subtle’ appearance.
- ‘subtle’: Minimizes emphasis to blend into the background until hovered or focused.
- ‘transparent’: No background and border styling The appearance affects each of the contained tabs.
“subtle”
“transparent”
“‘transparent’”
as
“div”
defaultSelectedValue
The value of the tab to be selected by default. Typically useful when the selectedValue is uncontrolled.
unknown
disabled
A tab list can be set to disable interaction.
boolean
false
onTabSelect
Raised when a tab is selected.
SelectTabEventHandler
reserveSelectedTabSpace
Tab size may change between unselected and selected states. The default scenario is a selected tab has bold text.
When true, this property requests tabs be the same size whether unselected or selected.
boolean
true
selectedValue
The value of the currently selected tab.
unknown
size
A tab list can be either ‘small’, ‘medium’, or ‘large’ size. The size affects each of the contained tabs.
“small”
“medium”
“large”
“‘medium’”
vertical
A tab list can arrange its tabs vertically.
boolean
false