{ "componentDescription": "", "propDescriptions": { "action": { "description": "Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It supports two actions: updateIndicator() and updateScrollButtons()" }, "allowScrollButtonsMobile": { "description": "If true, the scroll buttons aren't forced hidden on mobile. By default the scroll buttons are hidden on mobile and takes precedence over scrollButtons." }, "aria-label": { "description": "The label for the Tabs as a string." }, "aria-labelledby": { "description": "An id or list of ids separated by a space that label the Tabs." }, "centered": { "description": "If true, the tabs are centered. This prop is intended for large views." }, "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, "component": { "description": "The component used for the root node. Either a string to use a HTML element or a component." }, "indicatorColor": { "description": "Determines the color of the indicator." }, "onChange": { "description": "Callback fired when the value changes.", "typeDescriptions": { "event": { "name": "event", "description": "The event source of the callback. Warning: This is a generic event not a change event." }, "value": { "name": "value", "description": "We default to the index of the child (number)" } } }, "orientation": { "description": "The component orientation (layout flow direction)." }, "ScrollButtonComponent": { "description": "The component used to render the scroll buttons." }, "scrollButtons": { "description": "

Determine behavior of scroll buttons when tabs are set to scroll:

\n\n

By default the scroll buttons are hidden on mobile.\nThis behavior can be disabled with allowScrollButtonsMobile.

\n" }, "selectionFollowsFocus": { "description": "If true the selected tab changes on focus. Otherwise it only changes on activation." }, "slotProps": { "description": "The props used for each slot inside." }, "slots": { "description": "The components used for each slot inside." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, "TabIndicatorProps": { "description": "Props applied to the tab indicator element." }, "TabScrollButtonProps": { "description": "Props applied to the TabScrollButton element." }, "textColor": { "description": "Determines the color of the Tab." }, "value": { "description": "The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false." }, "variant": { "description": "

Determines additional display behavior of the tabs:

\n\n" }, "visibleScrollbar": { "description": "If true, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs." } }, "classDescriptions": { "centered": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the flex container element", "conditions": "centered={true} & !variant=\"scrollable\"" }, "fixed": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the tablist element", "conditions": "!variant=\"scrollable\"\b\b\b" }, "flexContainer": { "description": "", "deprecationInfo": "use list instead. See Migrating from deprecated APIs for more details." }, "flexContainerVertical": { "description": "", "deprecationInfo": "use a combination of list and vertical instead. See Migrating from deprecated APIs for more details." }, "hideScrollbar": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the tablist element", "conditions": "variant=\"scrollable\" and visibleScrollbar={false}" }, "scrollableX": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the tablist element", "conditions": "variant=\"scrollable\" and orientation=\"horizontal\"" }, "scrollableY": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the tablist element", "conditions": "variant=\"scrollable\" and orientation=\"vertical\"" }, "scrollButtonsHideMobile": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the ScrollButtonComponent component", "conditions": "allowScrollButtonsMobile={true}" }, "vertical": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "orientation=\"vertical\"" } }, "slotDescriptions": { "endScrollButtonIcon": "The component used for the end scroll button icon.", "indicator": "The component used for the tab indicator.", "list": "The component used for the flex container.", "root": "The component used for the popper.", "scrollbar": "The component used for the scroller.", "scrollButtons": "The component used for the scroll button.", "scroller": "The component used for the scroller.", "startScrollButtonIcon": "The component used for the start scroll button icon." } }