TabPanel is a component for grouping heterogeneous content.
Do not use this component:
Sizes and margins
- TabPanel.Item has
margin-right: var(--spacing-4x)(except for
- Margins of addons before and after the text is 8px.
Addons inside TabLine.Item has the same margins as addons inside the Button have.
Do not place icon without a text inside TabPanel.Item.
A flag and an icon cannot be placed in a tab at the same time. If there are badge and counter inside the tab, then place badge after the counter.
We recommended to add links to tabs, so the user can open different tabs of the report in different tabs with the right mouse button if necessary.
|Initial loading||When it is necessary to show that the data in the counter inside the TabPanel.Item is being loaded for the first time, use Skeleton with the size of the text's line-height.|
|Loading||When it is necessary to show that the data in the counter inside the TabPanel.Item is being loaded, use Spin with the smallest size (the sizes are the same as in Button).|
Usage in UX/UI
In cases when you have many tabs or there is not enough space for the tab text, collapse the text into the
Be sure to add the tooltip with the full text string to such tabs.
Also you can collapse the last tabs into a tab with an ellipsis.
By clicking on the last tab with an ellipsis in the dropdown, it is possible to display a list of items that did not fit. The item selected from this list put before tab with ellipsis.