TabStripComponent
Represents the Kendo UI TabStrip component for Angular.
Definition
Package:@progress/kendo-angular-layout
Selector:kendo-tabstrip
Export Name:Accessible in templates as #kendoTabStripInstance="kendoTabStrip"
Syntax:
<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>Inputs
animate
boolean
Sets whether the TabStrip should animate when switching tabs.
true
closable
boolean
When set to true, renders a close button inside each tab.
false
closeIcon
string
Defines the name of an existing font icon in the Kendo UI theme for the close icon.
'x'
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 | "loadOnDemand"
Controls how the TabStrip renders tab content.
The available options are:
true—Renders all tabs' content and persists them in the DOM.false—Removes inactive tabs' content from the DOM."loadOnDemand"—Loads tabs' content only when activated for the first time. Inactive tabs' content is not rendered until the tab is activated.
For more information, refer to the Rendering Modes article.
false
scrollable
boolean | TabStripScrollableSettings
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.
false
showContentArea
boolean
If set to false, the content area is hidden, but the tab headers are still visible.
true
Sets the size of the TabStrip. See example. The default value is set by the Kendo theme.
Sets the alignment of the tabs.
'start'
Sets the position of the tabs.
'top'
Fields
A query list of all declared tabs.
Events
Fires each time a tab is closed. The event data contains the index of the closed tab and its instance.
Fires when the tab list is scrolled. The event is preventable.
Fires each time a tab is selected. The event data contains the index of the selected tab and its title.
Methods
Allows you to programmatically select a tab by its index.
If the tab is disabled, it will not be selected. The tabSelect event will not be fired.
The index of the tab that will be selected.