New to Kendo UI for AngularStart a free 30-day trial

TabStripComponent

Represents the Kendo UI TabStrip component for Angular.

html
<kendo-tabstrip>
  <kendo-tabstrip-tab [title]="'First Tab'">
    <ng-template kendoTabContent>
      <p>Content of the first tab.</p>
    </ng-template>
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab [title]="'Second Tab'">
    <ng-template kendoTabContent>
      <p>Content of the second tab.</p>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

Selector

kendo-tabstrip

Export Name

Accessible in templates as #kendoTabStripInstance="kendoTabStrip"

Inputs

NameTypeDefaultDescription

animate

boolean

true

Sets whether the TabStrip should animate when switching tabs.

closable

boolean

false

When set to true, renders a close button inside each tab.

closeIcon

string

'x'

Defines the name of an existing font icon in the Kendo UI theme for the close icon.

closeIconClass

string

Defines a custom CSS class, or multiple classes separated by spaces, applied to the close button.

closeSVGIcon

SVGIcon

Defines an SVGIcon to render for the close icon. The input accepts either an existing Kendo SVG icon or a custom one.

height

string

Sets the height of the TabStrip. Accepts a CSS size value, such as 100px, 50%, or auto.

keepTabContent

boolean

false

When set to true, the tabs are persisted in the DOM and their content is not destroyed when they are not selected (see example).

scrollable

boolean | TabStripScrollableSettings

false

Enables scrolling of the tab list. When set to true and the total size of all tabs exceeds the size of the TabStrip container, scroll buttons appear on each end of the tab list.

showContentArea

boolean

true

If set to false, the content area is hidden, but the tab headers are still visible.

size

TabStripSize

'medium'

Sets the size of the TabStrip. See example.

tabAlignment

TabAlignment

'start'

Sets the alignment of the tabs.

tabPosition

TabPosition

'top'

Sets the position of the tabs.

Fields

NameTypeDefaultDescription

tabs

QueryList<TabStripTabComponent>

A query list of all declared tabs.

Events

NameTypeDescription

tabClose

EventEmitter<TabCloseEvent>

Fires each time a tab is closed. The event data contains the index of the closed tab and its instance.

tabScroll

EventEmitter<TabScrollEvent>

Fires when the tab list is scrolled. The event is preventable.

tabSelect

EventEmitter<SelectEvent>

Fires each time a tab is selected. The event data contains the index of the selected tab and its title.

Methods

selectTab

Allows you to programmatically select a tab by its index. If the tab is disabled, it will not be selected.

Parameters

index

number

The index of the tab that will be selected.

In this article
SelectorExport NameInputsFieldsEventsMethods
Not finding the help you need?
Contact Support