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

Customizing Tabstrip

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-tabstrip-wrapper-padding-xNullnullnull
Description
The horizontal padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-padding-yNullnullnull
Description
The vertical padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-border-widthNullnullnull
Description
The width of the border around the tabstrip wrapper
$kendo-tabstrip-font-familyNullnullnull
Description
The font family of the tabstrip
$kendo-tabstrip-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the tabstrip
$kendo-tabstrip-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the tabstrip
$kendo-tabstrip-border-widthNumber1px1px
Description
The width of the border around the tabstrip
$kendo-tabstrip-spacingNullnullnull
Description
The space between the tabstrip items
$kendo-tabstrip-item-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the tabstrip item
$kendo-tabstrip-item-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the tabstrip item
$kendo-tabstrip-item-border-widthNumber1px1px
Description
The width of the border around the tabstrip item
$kendo-tabstrip-item-border-styleStringsolidsolid
Description
The style of the border around the tabstrip item
$kendo-tabstrip-item-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
The border radius of the tabstrip item
$kendo-tabstrip-item-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.8)
Description
The focus shadow of the tabstrip item
$kendo-tabstrip-indicator-sizeStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The border width of the tabstrip indicator
$kendo-tabstrip-indicator-colorStringk-get-theme-color-var( primary-100 )var(--kendo-primary-100, inherit)
Description
The border color of the tabstrip ripple
$kendo-tabstrip-content-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of tabstrip content
$kendo-tabstrip-content-border-widthNumber1px1px
Description
The width of border around tabstrip content
$kendo-tabstrip-content-border-styleStringsolidsolid
Description
The style of border around tabstrip content
$kendo-tabstrip-scrollable-button-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal button padding of the scrollable tabstrip
$kendo-tabstrip-scrollable-button-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)

In this article

Not finding the help you need?