materialuiupgraded

Version:

Material-UI's workspace package

69 lines (50 loc) • 5.6 kB

Markdown

--- filename: /packages/material-ui/src/Tabs/Tabs.js title: Tabs API ---  # Tabs The API documentation of the Tabs React component. Learn more about the properties and the CSS customization points. ```js import Tabs from '@material-ui/core/Tabs'; ``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | action | func | | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action. **Signature:** `function(actions: object) => void` *actions:* This object contains all possible actions that can be triggered programmatically. | | centered | bool | false | If `true`, the tabs will be centered. This property is intended for large views. | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |  func |  object | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | fullWidth | bool | false | If `true`, the tabs will grow to use all the available space. This property is intended for small views, like on mobile. | | indicatorColor | enum: 'secondary' |  'primary' | 'secondary' | Determines the color of the indicator. | | onChange | func | | Callback fired when the value changes. **Signature:** `function(event: object, value: number) => void` *event:* The event source of the callback *value:* We default to the index of the child | | scrollable | bool | false | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. | | ScrollButtonComponent | union: string |  func |  object | TabScrollButton | The component used to render the scroll buttons. | | scrollButtons | enum: 'auto' |  'on' |  'off' | 'auto' | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them | | TabIndicatorProps | object | | Properties applied to the `TabIndicator` element. | | textColor | enum: 'secondary' |  'primary' |  'inherit' | 'inherit' | Determines the color of the `Tab`. | | value | any | | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. | Any other properties supplied will be spread to the root element (native element). ## CSS API You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. | flexContainer | Styles applied to the flex container element. | centered | Styles applied to the flex container element if `centered={true}` & `scrollable={false}`. | scroller | Styles applied to the tablist element. | fixed | Styles applied to the tablist element if `scrollable={false}`. | scrollable | Styles applied to the tablist element if `scrollable={true}`. | scrollButtons | Styles applied to the `ScrollButtonComponent` component. | scrollButtonsAuto | Styles applied to the `ScrollButtonComponent` component if `scrollButtons="auto"`. | indicator | Styles applied to the `TabIndicator` component. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Tabs/Tabs.js) for more detail. If using the `overrides` key of the theme as documented [here](/customization/themes/#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiTabs`. ## Demos - [Tabs](/demos/tabs/)