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-x0px
Description
The horizontal padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-padding-y0px
Description
The vertical padding of the tabstrip wrapper
$kendo-tabstrip-wrapper-border-width0px
Description
The width of the border around the tabstrip wrapper
$kendo-tabstrip-wrapper-bgtransparent
Description
The background color of the tabstrip wrapper
$kendo-tabstrip-wrapper-textinitial
Description
The text color of the tabstrip wrapper
$kendo-tabstrip-wrapper-borderinitial
Description
The border color of the tabstrip wrapper
$kendo-tabstrip-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the tabstrip
$kendo-tabstrip-font-sizevar( --kendo-font-size, inherit )
Description
The font size of the tabstrip
$kendo-tabstrip-line-heightvar( --kendo-line-height, normal )
Description
The line height of the tabstrip
$kendo-tabstrip-border-width0px
Description
The width of the border around the tabstrip
$kendo-tabstrip-bgtransparent
Description
The background color of the tabstrip
$kendo-tabstrip-textvar( --kendo-component-text, initial )
Description
The text color of the tabstrip
$kendo-tabstrip-bordertransparent
Description
The border color of the tabstrip
$kendo-tabstrip-item-padding-xvar( --kendo-padding-x, #{$kendo-padding-md-x} )
Description
The horizontal padding of the tabstrip item
$kendo-tabstrip-item-padding-ymap.get( $kendo-spacing, 2 ) + map.get( $kendo-spacing, 1 )
Description
The vertical padding of the tabstrip item
$kendo-tabstrip-item-border-width0px
Description
The width of the border around the tabstrip item
$kendo-tabstrip-item-border-radiusvar( --kendo-border-radius-md, #{$kendo-border-radius-md} )
Description
The border radius of the tabstrip item
$kendo-tabstrip-item-gapmap.get( $kendo-spacing, 2 )
Description
The gap between the tabstrip items
$kendo-tabstrip-item-bgtransparent
Description
The background color of the tabstrip item
$kendo-tabstrip-item-textvar( --kendo-component-text, initial )
Description
The text color of the tabstrip item
$kendo-tabstrip-item-bordertransparent
Description
The border color of the tabstrip item
$kendo-tabstrip-item-disabled-textvar( --kendo-disabled-text, initial )
Description
The text color of the disabled tabstrip item
$kendo-tabstrip-item-disabled-bgnone
Description
The background color of the disabled tabstrip item
$kendo-tabstrip-item-disabled-bordervar( --kendo-disabled-border, initial )
Description
The border color of the disabled tabstrip item
$kendo-tabstrip-item-hover-bgvar( --kendo-hover-bg, inherit )
Description
The background color of hovered tabs
$kendo-tabstrip-item-hover-textvar( --kendo-hover-text, inherit )
Description
The text color of hovered tabs
$kendo-tabstrip-item-hover-bordervar( --kendo-hover-bg, inherit )
Description
The border color of hovered tabs
$kendo-tabstrip-item-selected-bgvar( --kendo-component-bg, transparent )
Description
The background color of selected tabs
$kendo-tabstrip-item-selected-textif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
Description
The text color of selected tabs
$kendo-tabstrip-item-selected-borderif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of selected tabs
$kendo-tabstrip-item-selected-font-weightvar( --kendo-font-weight-bold, normal )
Description
The background gradient of selected tabs
$kendo-tabstrip-item-focus-shadow$kendo-list-item-focus-shadow
Description
The focus shadow of the tabstrip item
$kendo-tabstrip-item-dragging-textif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the sortable tabstrip item
$kendo-tabstrip-indicator-sizemap.get( $kendo-spacing, 0.5 )
Description
The border width of the tabstrip indicator
$kendo-tabstrip-indicator-colorif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The border color of the tabstrip ripple
$kendo-tabstrip-content-padding-xmap.get( $kendo-spacing, 3 )
Description
The horizontal padding of tabstrip content
$kendo-tabstrip-content-padding-ymap.get( $kendo-spacing, 1.5 )
Description
The vertical padding of tabstrip content
$kendo-tabstrip-content-border-width1px
Description
The width of border around tabstrip content
$kendo-tabstrip-content-bgvar( --kendo-component-bg, transparent )
Description
The background color of tabstrip content
$kendo-tabstrip-content-textvar( --kendo-component-text, inherit )
Description
The text color of tabstrip content
$kendo-tabstrip-content-bordertransparent
Description
The border color of tabstrip content
$kendo-tabstrip-content-focus-bordervar( --kendo-component-text, initial )
Description
The border color of tabstrip focused content
$kendo-tabstrip-scrollable-button-padding-xmap.get( $kendo-spacing, 1 )
Description
The horizontal button padding of the scrollable tabstrip
$kendo-tabstrip-scrollable-button-padding-ymap.get( $kendo-spacing, 1 )

In this article

Not finding the help you need?