TabStripProps
Represents the props of the KendoReact TabStrip component.
Definition
Package:@progress/kendo-react-layout
Properties
animation?
boolean
Enables the tab animation.
buttonScrollSpeed?
number
Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.
100
children?
ReactNode
Determines the children nodes.
className?
string
Specifies the CSS class names of the TabStrip component.
dir?
string
Sets the direction of the TabStrip component.
id?
string
Sets the id property of the top div element of the component.
keepTabsMounted?
boolean
Defines if the tabs will remain mounted after another tab is selected. Defaults to false.
mouseScrollSpeed?
number
Sets the tab list scroll speed in pixels when scrolling via mouse wheel.
10
nextButton?
ComponentType<ButtonProps>
Defines the custom component that will be rendered as a next button.
To remove the button, set a function which returns null () => null.
onSelect?
(e: TabStripSelectEventArguments) => void
Fires each time the user makes a selection.
prevButton?
ComponentType<ButtonProps>
Defines the custom component that will be rendered as a previous button.
To remove the button, set a function which returns null () => null.
renderAllContent?
boolean
false
Defines if all component tabs will be rendered by default. Defaults to false.
If set to false, the component will render only the currently selected tab. This can be useful when the content of the tabs is heavy and you want to improve the initial loading time. Check also the keepTabsMounted prop.
scrollable?
boolean
Determines whether the TabStrip will be scrollable.
false
Sets the visibility of the scroll buttons.
auto
Sets the scroll buttons position according to the tab list. The previous options 'around', 'before', 'after' are going to be deprecated in favor of 'split', 'start', 'end'.
split
selected?
number
Sets the index of the selected TabStripTab component (see example).
Specifies the possible sizes of the TabStrip.
undefined (theme-controlled)
tabAlignment?
string
Sets the alignment of the tabs. Defaults to start.
The available options are:
"start"—Aligns the tabs at the start of theTabStripNavigation."center"—Aligns the tabs in the center of theTabStripNavigation."end"—Aligns the tabs at the end of theTabStripNavigation."justify"—Justifies the tabs inside theTabStripNavigation."stretched"—Stretches the tabs inside theTabStripNavigation.
Sets the style of the TabStripContent component.
tabIndex?
number
Sets the tabIndex of the TabStripNavigation.
tabPosition?
string
Sets the position of the tabs. Defaults to top.
The available options are:
"top"—Renders theTabStripNavigationto the top of the TabStrip."bottom"—Renders theTabStripNavigationto the bottom of the TabStrip."left"—Renders theTabStripNavigationto the left of the TabStrip."right"—Renders theTabStripNavigationto the right of the TabStrip.
webMcp?
boolean | WebMcpProps
Enables Web MCP tool registration so AI agents can interact with this TabStrip.
Set to true to use the provider-level dataName, or pass a config object to override.
Requires a WebMcpProvider ancestor from @progress/kendo-react-webmcp.