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-bgNull

null

null

Description
Background color of tabstrip component
$tabstrip-textColor

$component-text

#212529

Description
Text color of tabstrip component
$tabstrip-borderColor

$component-border

#dee2e6

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

$nav-item-padding-x

1rem

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

$nav-item-padding-y

0.5rem

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

1px

1px

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

map-get( $spacing, 1 )

0.25rem

Description
Border radius of tabs
$tabstrip-item-gapNumber

$nav-item-margin

0px

Description
Spacing between tabs
$tabstrip-item-bgNull

null

null

Description
Background color of tabs
$tabstrip-item-textColor

$link-text

#0d6efd

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-bgNull

null

null

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

$link-hover-text

#0a58ca

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

$gray-200

#e9ecef

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

null

null

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

$component-bg

#ffffff

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

$component-text

#212529

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

$component-border

#dee2e6

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 )

1rem

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

map-get( $spacing, 4 )

1rem

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

$tabstrip-border-width

1px

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

$component-bg

#ffffff

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

$component-text

#212529

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

$component-border

#dee2e6

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

$component-text

#212529

Description
Border color of tabstrip focused content

In this article

Not finding the help you need?