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

Tabs

You can instantiate the TabStrip tabs by initializing them as KendoTabStripTab components and use their corresponding properties.

The TabStrip provides the following configuration options for its tabs:

Displaying Tabs on Initial Load

The TabStrip displays no tabs when it is initially loaded. To change this behavior, set the selected property of the tab.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabled Tabs

You can disable a specific TabStrip tab by setting the disabled property to true.

Example
View Source
Edit In Stackblitz  
Change Theme:

Titles

Use one of the following approaches to provide the tab title:

  • Set the TabStripTab title option.
  • Use the kendoTabTitle template directive to render any custom content.

The kendoTabTitle directive overrides the TabStripTab title option.

The following example demonstrates both approaches for setting the tab title.

Example
View Source
Edit In Stackblitz  
Change Theme:

Position

You can control the position of the tabs by setting the tabPosition property to top, right, bottom, or left. The default position is top.

Example
View Source
Edit In Stackblitz  
Change Theme:

Alignment

You can control the alignment of the tabs by setting the tabAlignment property to start, end, center, or justify.

Example
View Source
Edit In Stackblitz  
Change Theme: