New to KendoReact? Start a free 30-day trial

TabStripProps

Interface

Represents the props of the KendoReact TabStrip component.

Properties

animation?

boolean

Enables the tab animation.

Example:

jsx

<TabStrip animation={true} />

buttonScrollSpeed?

number

Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.

Default:

100

className?

string

Specifies the CSS class names of the TabStrip component.

Example:

jsx

<TabStrip className="custom-class" />

dir?

string

Sets the direction of the TabStrip component.

Example:

jsx

<TabStrip dir="rtl" />

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.

Example:

jsx

<TabStrip keepTabsMounted={true} />

mouseScrollSpeed?

number

Sets the tab list scroll speed in pixels when scrolling via mouse wheel.

Default:

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.

Parameters:eTabStripSelectEventArguments

Example:

jsx

<TabStrip onSelect={(e) => console.log(e.selected)} />

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.

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.

Example:

jsx

<TabStrip renderAllContent={true} />

scrollable?

boolean

Determines whether the TabStrip will be scrollable.

Default:

false

scrollButtons?

ScrollButtons

Sets the visibility of the scroll buttons.

Default:

auto

scrollButtonsPosition?

ScrollButtonsPosition

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'.

Default:

split

selected?

number

Sets the index of the selected TabStripTab component (see example).

Example:

jsx

<TabStrip selected={0} />

size?

TabStripSize

Specifies the possible sizes of the TabStrip.

Default:

undefined (theme-controlled)

Example:

jsx

<TabStrip size="small" />

tabAlignment?

string

Sets the alignment of the tabs. Defaults to start.

The available options are:

"start"—Aligns the tabs at the start of the TabStripNavigation.
"center"—Aligns the tabs in the center of the TabStripNavigation.
"end"—Aligns the tabs at the end of the TabStripNavigation.
"justify"—Justifies the tabs inside the TabStripNavigation.
"stretched"—Stretches the tabs inside the TabStripNavigation.

Example:

jsx

<TabStrip tabAlignment="center" />

tabContentStyle?

any

Sets the style of the TabStripContent component.

Example:

jsx

<TabStrip tabContentStyle={{ padding: '10px' }} />

tabIndex?

number

Sets the tabIndex of the TabStripNavigation.

Example:

jsx

<TabStrip tabIndex={0} />

tabPosition?

string

Sets the position of the tabs. Defaults to top.

The available options are:

"top"—Renders the TabStripNavigation to the top of the TabStrip.
"bottom"—Renders the TabStripNavigation to the bottom of the TabStrip.
"left"—Renders the TabStripNavigation to the left of the TabStrip.
"right"—Renders the TabStripNavigation to the right of the TabStrip.

Example:

jsx

<TabStrip tabPosition="bottom" />

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.

TabStripProps

Definition

Properties

animation?

buttonScrollSpeed?

children?

className?

dir?

id?

keepTabsMounted?

mouseScrollSpeed?

nextButton?

onSelect?

prevButton?

renderAllContent?

scrollable?

scrollButtons?

scrollButtonsPosition?

selected?

size?

tabAlignment?

tabContentStyle?

tabIndex?

tabPosition?

webMcp?