• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
      • Overview
      • Getting Started
      • ActionSheet
      • AppBar
      • Avatar
      • BottomNavigation
      • Breadcrumb
      • Card
      • Drawer
      • ExpansionPanel
      • GridLayout
      • Menu
      • Context Menu
      • PanelBar
      • Splitter
      • StackLayout
      • TabStrip
      • Stepper
      • TileLayoutupdated
      • Timeline
      • Globalization
      • API
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

TabStripProps

Represents the props of the KendoReact TabStrip component.

NameTypeDefaultDescription

animation?

boolean

Enables the tab animation.

buttonScrollSpeed?

number

100

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

children?

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

10

Sets the tab list scroll speed in pixels when scrolling via the mouse wheel. You can disable the mouse wheel scrolling by setting this prop to 0.

nextButton?

React.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?

React.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 the 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

false

Determines whether the TabStrip will be scrollable.

selected?

number

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

tabContentStyle?

any

Sets the style of the TabStripContent component.

tabIndex?

number

Sets the tabIndex of the TabStripNavigation.

tabPosition?

string

The position in which the TabStripNavigation components will be rendered.

The available options are:

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