New to Kendo UI for Angular? 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-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the tabstrip item
$kendo-tabstrip-item-padding-yNumberk-map-get( $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-sizeNumberk-map-get( $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-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-yNumberk-map-get( $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-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal button padding of the scrollable tabstrip
$kendo-tabstrip-scrollable-button-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem

In this article

Not finding the help you need?