TabStripComponent
Represents the Kendo UI TabStrip component for Angular.
Selector
kendo-tabstrip
Export Name
Accessible in templates as #kendoTabStripInstance="kendoTabStrip"
Inputs
animate
boolean
(default: true) Enables the tab animation.
closable
boolean
(default: false)
When set to true
, a close button will be rendered inside each tab.
By default, closable
is false
.
closeIcon
string
Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button span element. Allows the usage of custom icons.
keepTabContent
boolean
(default: false)
When set to true
, the component renders all tabs and they are persisted in the DOM.
By default, keepTabContent
is false
.
tabAlignment
Sets the alignment of the tabs.
tabPosition
(default: 'top')
Sets the position of the tabs. Defaults to top
.
height
string
Sets the height of the TabStrip.
scrollable
boolean | TabStripScrollableSettings
(default: false)
Enables the scrolling of the tab list. When set to true
and the total size of all tabs
is greater than the size of the TabStrip container, scroll buttons will be rendered on each end of the tab list.
By default, scrollable
is false
.
Fields
tabs
QueryList<TabStripTabComponent>
A query list of all declared tabs.
Events
tabClose
Fires each time the user closes a tab. The event data contains the index of the closed tab and its instance.
tabScroll
Fires each time the user scrolls the TabStrip list. The event is preventable.
tabSelect
Fires each time the user selects a tab (see example). The event data contains the index of the selected tab and its title.
Methods
selectTab
Allows the user to select a tab programmatically.
Parameters
index
number
The index of the tab that will be selected.