Tabs beta
beta
Tabs are used to organize content and data sets into different views.
1. Anatomy
Aria attributes
Value | Purpose |
role = “tab” | Defines the role. |
aria-selected=“boolean” | Indicate whether a tab is selected |
aria-controls | It is the id of element with “tabpanel” role. |
2. Configurations
2.1 #of items
Add page links to the component. Please limit the #of items to less than 5 to avoid cognitive overload.
2.2 Prefix
Tabs support icon prefix. Please use prefix coherently for all the tabs in one tab bar.
3. Behavior
3.1 Switching views
3.2 Interacting with overflown content
A scroll view will be enabled once the tab bar is bigger than the container. Users can click on the chevron to change the view.
7. Resilience & responsiveness
7.1 Minimum width
The tab width grows as the text’s width. There is a minimum width of 44px applied to each tab.
7.2 Text overflow
Tabs will always be one line.- Tabs will always be left aligned. The divider fills the container.
- The tab bar becomes scrollable if the tab width grows beyond the container’s constrain.
