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

Customizing Tabstrip

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$tabstrip-bgNull

null

null

Description
Background color of tabstrip component
$tabstrip-textColor

$subtle-text

rgba(0, 0, 0, 0.54)

Description
Text color of tabstrip component
$tabstrip-borderColor

$component-border

rgba(0, 0, 0, 0.12)

Description
Border color of tabstrip component
$tabstrip-item-padding-xNumber

24px

24px

Description
Horizontal padding of tabs
$tabstrip-item-padding-yNumber

14px

14px

Description
Vertical padding of tabs
$tabstrip-item-border-widthNumber

0px

0px

Description
Width of border around of tabs
$tabstrip-item-border-radiusNumber

0px

0px

Description
Border radius of tabs
$tabstrip-item-gapNumber

0px

0px

Description
Spacing between tabs
$tabstrip-item-bgNull

null

null

Description
Background color of tabs
$tabstrip-item-textColor

$subtle-text

rgba(0, 0, 0, 0.54)

Description
Text color of tabs
$tabstrip-item-borderNull

null

null

Description
Border color of tabs
$tabstrip-item-gradientNull

null

null

Description
Background gradient of tabs
$tabstrip-item-hovered-bgColor

$hovered-bg

rgba(0, 0, 0, 0.04)

Description
Background color of hovered tabs
$tabstrip-item-hovered-textColor

$body-text

rgba(0, 0, 0, 0.87)

Description
Text color of hovered tabs
$tabstrip-item-hovered-borderNull

null

null

Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientNull

null

null

Description
Background gradent of hovered tabs
$tabstrip-item-selected-bgNull

null

null

Description
Background color of selected tabs
$tabstrip-item-selected-textColor

$body-text

rgba(0, 0, 0, 0.87)

Description
Text color of selected tabs
$tabstrip-item-selected-borderNull

null

null

Description
Border color of selected tabs
$tabstrip-item-selected-gradientNull

null

null

Description
Background gradient of selected tabs
$tabstrip-content-padding-xNumber

map-get( $spacing, 4 )

16px

Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-yNumber

map-get( $spacing, 4 )

16px

Description
Vertical padding of tabstrip content
$tabstrip-content-border-widthNumber

0px

0px

Description
Width of border around tabstrip content
$tabstrip-content-bgColor

transparent

transparent

Description
Background color of tabstrip content
$tabstrip-content-textNull

null

null

Description
Text color of tabstrip content
$tabstrip-content-borderNull

null

null

Description
Border color of tabstrip content
$tabstrip-content-border-focusedColor

$component-text

rgba(0, 0, 0, 0.87)

Description
Border color of tabstrip focused content

In this article

Not finding the help you need?