New to KendoReact? Start a free 30-day trial
Customizing Tabstrip
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $tabstrip-bg | null | null | |
Description Background color of tabstrip component | |||
| $tabstrip-text | $component-text | ||
Description Text color of tabstrip component | |||
| $tabstrip-border | $nav-tabs-border-color | ||
Description Border color of tabstrip component | |||
| $tabstrip-item-padding-x | $nav-item-padding-x | ||
Description Horizontal padding of tabs | |||
| $tabstrip-item-padding-y | $nav-item-padding-y | ||
Description Vertical padding of tabs | |||
| $tabstrip-item-border-width | $nav-tabs-border-width | ||
Description Width of border around tabs | |||
| $tabstrip-item-border-radius | $nav-tabs-border-radius | ||
Description Border radius of tabs | |||
| $tabstrip-item-gap | $nav-item-margin | ||
Description Spacing between tabs | |||
| $tabstrip-item-bg | null | null | |
Description Background color of tabs | |||
| $tabstrip-item-text | $link-text | ||
Description Text color of tabs | |||
| $tabstrip-item-border | null | null | |
Description Border color of tabs | |||
| $tabstrip-item-gradient | null | null | |
Description Background gradient of tabs | |||
| $tabstrip-item-hovered-bg | null | null | |
Description Background color of hovered tabs | |||
| $tabstrip-item-hovered-text | $link-hover-text | ||
Description Text color of hovered tabs | |||
| $tabstrip-item-hovered-border | $nav-tabs-link-hover-border-color | ||
Description Border color of hovered tabs | |||
| $tabstrip-item-hovered-gradient | null | null | |
Description Background gradient of hovered tabs | |||
| $tabstrip-item-selected-bg | $nav-tabs-link-active-bg | ||
Description Background color of selected tabs | |||
| $tabstrip-item-selected-text | $nav-tabs-link-active-color | ||
Description Text color of selected tabs | |||
| $tabstrip-item-selected-border | $nav-tabs-link-active-border-color | ||
Description Border color of selected tabs | |||
| $tabstrip-item-selected-gradient | null | null | |
Description Background gradient of selected tabs | |||
| $tabstrip-content-padding-x | $tabstrip-item-padding-x | ||
Description Horizontal padding of tabstrip content | |||
| $tabstrip-content-padding-y | $tabstrip-item-padding-y | ||
Description Vertical padding of tabstrip content | |||
| $tabstrip-content-border-width | $nav-tabs-border-width | ||
Description Width of border around tabstrip content | |||
| $tabstrip-content-bg | $component-bg | $component-bg | |
Description Background color of tabstrip content | |||
| $tabstrip-content-text | $component-text | ||
Description Text color of tabstrip content | |||
| $tabstrip-content-border | $component-border | ||
Description Border color of tabstrip content | |||
| $tabstrip-content-border-focused | $component-text | ||
Description Border color of tabstrip focused content | |||
