Build your web apps using Smart UI
Tabs - CSS API Reference
All Common CSS variables:
Specific CSS variables for Tabs styling:
- --smart-tabs-header-button-size: Tabs header buttons size. Horizontal Tabs header buttons width = Vertical Tab header buttons height.
- --smart-tabs-animation-duration: Tabs animation duration.
- --smart-tabs-default-width: Tabs default width.
- --smart-tabs-default-height: Tabs default height.
- --smart-tabs-header-padding: Defines Tabs header padding.
- --smart-tabs-header-offset: Defines Tabs header offset.
- --smart-tab-item-padding: Defines vertical and horizontal padding of tab items.
- --smart-tab-item-offset: Default tab item offset.
- --smart-tab-item-initial-offset: Initial tab item offset.
- --smart-tab-item-text-transform: Tab item text capitalization.
The following CSS selectors can be used to style Tabs:
-
smart-tabs - applied to the whole Tabs element. Can be used for setting width, height and border-, color- and font-related CSS properties.
-
.smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
-
.smart-header .smart-tabs-header-section - applied to the Tabs header section, which includes the scroll buttons, tab strip, dropdown button and resize token.
-
.smart-tabs-header-items - a container for the tabStrip and the scroll buttons.
- .smart-tabs-scroll-button .smart-nav-button .smart-spin-button - applied to the Tabs scroll buttons. These are shown only when the property tabOverflow is 'scroll' and there is not enough space to show all tab labels. See also section "CSS variables".
-
.smart-tab-strip - applied to the tab strip, which contains all tab and group labels.
-
.smart-tab-label-container - applied to tab labels. .smart-tab-selected is applied to selected tab label. [hover] is applied to hovered tab label. .smart-add-new-tab - applied to the "Add new" tab (+) label.
- .smart-tab-label-text-wrapper - a wrapper for the label and the close button.
- .smart-tab-label-text-container - text label container
- .smart-tab-close-button - applied to tab close buttons, if enabled. .smart-tab-close-button-hovered - applied to hovered tab close buttons.
- .smart-tab-group-container - applied to tab group labels. .smart-tab-group-selected is applied to the labels of groups which contain selected tabs. [hover] is applied to hovered tab label.
-
.smart-tab-label-container - applied to tab labels. .smart-tab-selected is applied to selected tab label. [hover] is applied to hovered tab label. .smart-add-new-tab - applied to the "Add new" tab (+) label.
- .smart-tab-label-text-wrapper - a wrapper for the label and the close button.
- .smart-tab-label-text-container - text label container.
- .smart-tab-group-arrow - a container for the arrow icon.
- .smart-tabs-drop-down-button - applied to the dropdown button. It is shown only when the property tabOverflow is 'dropdown' and there is not enough space to show all tab labels. See also section "CSS variables".
-
.smart-tabs-header-items - a container for the tabStrip and the scroll buttons.
- .smart-tabs-selection-bar - a simple color bar used purely for styling.
-
.smart-tabs-content-section - applied to the Tabs content section.
- smart-tab-item - applied to tab items, which represent the content of each tab.
- smart-tab-items-group - applied to tab item groups, which are containers of grouped tab items.
- .smart-tabs-drop-down-button-drop-down - applied to the dropdown which is shown when the dropdown button is clicked.
-
.smart-tab-group-drop-down is applied to the dropdown which is shown when a group label is clicked.
- .smart-tab-label-container - a label for a tab label container that is currenttly not in view.
- .smart-tabs-resize-token - applied to the element which is shown to indicate resize operation.
-
.smart-header .smart-tabs-header-section - applied to the Tabs header section, which includes the scroll buttons, tab strip, dropdown button and resize token.
-
.smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
Demo
<style> #tabs{ --smart-color: #ccc; --smart-font-size: 20px; } </style>