Customizing Tabstrip

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-tabstrip-bgNullnullnull
Description
Background color of tabstrip component
$kendo-tabstrip-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
Text color of tabstrip component
$kendo-tabstrip-borderString$kendo-component-bordervar(--kendo-color-border, #dee2e6)
Description
Border color of tabstrip component
$kendo-tabstrip-item-padding-xNumber$nav-link-padding-x1rem
Description
Horizontal padding of tabs
$kendo-tabstrip-item-padding-yNumber$nav-link-padding-y0.5rem
Description
Vertical padding of tabs
$kendo-tabstrip-item-border-widthNumber1px1px
Description
Width of border around tabs
$kendo-tabstrip-item-border-radiusStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
Border radius of tabs
$kendo-tabstrip-item-gapStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
Spacing between tabs
$kendo-tabstrip-item-bgNullnullnull
Description
Background color of tabs
$kendo-tabstrip-item-textString$kendo-link-textvar(--kendo-color-primary, #0d6efd)
Description
Text color of tabs
$kendo-tabstrip-item-borderNullnullnull
Description
Border color of tabs
$kendo-tabstrip-item-gradientNullnullnull
Description
Background gradient of tabs
$kendo-tabstrip-item-hover-bgNullnullnull
Description
Background color of hovered tabs
$kendo-tabstrip-item-hover-textString$kendo-link-hover-textvar(--kendo-color-primary-hover, #0b5ed7)
Description
Text color of hovered tabs
$kendo-tabstrip-item-hover-borderColor$gray-200#e9ecef
Description
Border color of hovered tabs
$kendo-tabstrip-item-hover-gradientNullnullnull
Description
Background gradient of hovered tabs
$kendo-tabstrip-item-selected-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
Background color of selected tabs
$kendo-tabstrip-item-selected-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
Text color of selected tabs
$kendo-tabstrip-item-selected-borderString$kendo-component-bordervar(--kendo-color-border, #dee2e6)
Description
Border color of selected tabs
$kendo-tabstrip-item-selected-gradientNullnullnull
Description
Background gradient of selected tabs
$kendo-tabstrip-content-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of tabstrip content
$kendo-tabstrip-content-border-widthNumber$kendo-tabstrip-border-width1px
Description
Width of border around tabstrip content
$kendo-tabstrip-content-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
Background color of tabstrip content
$kendo-tabstrip-content-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
Text color of tabstrip content
$kendo-tabstrip-content-borderString$kendo-component-bordervar(--kendo-color-border, #dee2e6)
Description
Border color of tabstrip content
$kendo-tabstrip-content-focus-borderString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
Border color of tabstrip focused content

In this article

Not finding the help you need?