Tabs Configuration
To initialize tabs inside the TabStrip, nest them as TabStripTab components inside the <kendo-tabstrip> tag and use their corresponding properties.
The TabStrip provides the following configuration options for its tabs:
Selected Tab
When the TabStrip is initially loaded, it doesn't display any tabs as selected. To visualize a tab as selected, set its selected property to true.
Disabled Tabs
You can disable a specific TabStrip tab by setting the disabled property to true.
Tab Titles
Use one of the following approaches to provide the tab title:
- Set the TabStripTab
titleoption. - Use the
kendoTabTitletemplate directive to render any custom content.
The
kendoTabTitledirective overrides the TabStripTabtitleoption.
The following example demonstrates both approaches for setting the tab title.
Tab Position
You can control the position of the tabs by setting the tabPosition property of the TabStrip to top, right, bottom, or left. The default position is top.
Tab Alignment
You can control the alignment of the tabs by setting the tabAlignment property of the TabStrip to start, end, center, justify, or stretched.
Closable Tabs
The TabStrip enables you to render a close button inside each tab. For further details and runnable demos, refer to the article about Closable tabs.
Scrollable Tabs
The TabStrip allows you to scroll through its tabs when the tab list cannot fit in the component boundaries. For further details and runnable demos, refer to the article about Scrollable tabs.