New to Kendo UI for Vue? Start a free 30-day trial

Customizing Tabstrip

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$tabstrip-bgnullnull
Description
Background color of tabstrip component
$tabstrip-text$subtle-text
Description
Text color of tabstrip component
$tabstrip-border$component-bordermap-get($theme, component-border)
Description
Border color of tabstrip component
$tabstrip-item-padding-x24px24px
Description
Horizontal padding of tabs
$tabstrip-item-padding-y14px14px
Description
Vertical padding of tabs
$tabstrip-item-border-width0px0px
Description
Width of border around of tabs
$tabstrip-item-border-radius0px0px
Description
Border radius of tabs
$tabstrip-item-gap0px0px
Description
Spacing between tabs
$tabstrip-item-bgnullnull
Description
Background color of tabs
$tabstrip-item-text$subtle-text
Description
Text color of tabs
$tabstrip-item-bordernullnull
Description
Border color of tabs
$tabstrip-item-gradientnullnull
Description
Background gradient of tabs
$tabstrip-item-hovered-bg$hovered-bgmap-get( $theme, hover-bg )
Description
Background color of hovered tabs
$tabstrip-item-hovered-text$body-text
Description
Text color of hovered tabs
$tabstrip-item-hovered-bordernullnull
Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientnullnull
Description
Background gradent of hovered tabs
$tabstrip-item-selected-bgnullnull
Description
Background color of selected tabs
$tabstrip-item-selected-text$body-text
Description
Text color of selected tabs
$tabstrip-item-selected-bordernullnull
Description
Border color of selected tabs
$tabstrip-item-selected-gradientnullnull
Description
Background gradient of selected tabs
$tabstrip-content-padding-x$tabstrip-item-padding-x24px
Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-y$tabstrip-item-padding-y14px
Description
Vertical padding of tabstrip content
$tabstrip-content-border-width0px0px
Description
Width of border around tabstrip content
$tabstrip-content-bgtransparenttransparent
Description
Background color of tabstrip content
$tabstrip-content-textnullnull
Description
Text color of tabstrip content
$tabstrip-content-bordernullnull
Description
Border color of tabstrip content
$tabstrip-content-border-focused$component-textmap-get($theme, component-text)
Description
Border color of tabstrip focused content

In this article

Not finding the help you need?