Tabs API
Importação
import Tabs from '@mui/material/Tabs';
// ou
import { Tabs } from '@mui/material';Nome do componente
The nameMuiTabs can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente nativo também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| action | ref | 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 | bool | false | 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 | string | The label for the Tabs as a string. | |
| aria-labelledby | string | An id or list of ids separated by a space that label the Tabs. | |
| centered | bool | false | If true, the tabs are centered. This prop is intended for large views. |
| children | node | O conteúdo do componente. | |
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| indicatorColor | 'primary' | 'secondary' | string | 'primary' | Determines the color of the indicator. |
| onChange | func | Callback fired when the value changes. Signature: function(event: object, value: any) => voidevent: The event source of the callback. Warning: This is a generic event not a change event. value: We default to the index of the child (number) | |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The group orientation (layout flow direction). |
| ScrollButtonComponent | elementType | TabScrollButton | The component used to render the scroll buttons. |
| scrollButtons | 'auto' | false | true | 'auto' | Determine behavior of scroll buttons when tabs are set to scroll: - auto will only present them when not all the items are visible. - true will always present them. - false will never present them.By default the scroll buttons are hidden on mobile. This behavior can be disabled with allowScrollButtonsMobile. |
| selectionFollowsFocus | bool | false | If true the selected tab changes on focus. Otherwise it only changes on activation. |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| TabIndicatorProps | object | {} | Props applied to the tab indicator element. |
| TabScrollButtonProps | object | {} | Props applied to the TabScrollButton element. |
| textColor | 'inherit' | 'primary' | 'secondary' | 'primary' | 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 prop to false. | |
| variant | 'fullWidth' | 'scrollable' | 'standard' | 'standard' | Determines additional display behavior of the tabs: - scrollable will invoke scrolling properties and allow for horizontally scrolling (or swiping) of the tab bar. -fullWidth will make the tabs grow to use all the available space, which should be used for small views, like on mobile. - standard will render the default state. |
| visibleScrollbar | bool | false | If true, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiTabs-root | Estilos aplicados ao elemento raiz. |
| vertical | .MuiTabs-vertical | Estilos aplicados para o elemento raiz se orientation="vertical". |
| flexContainer | .MuiTabs-flexContainer | Estilos aplicados a the flex container element. |
| flexContainerVertical | .MuiTabs-flexContainerVertical | Estilos aplicados para the flex container element se orientation="vertical". |
| centered | .MuiTabs-centered | Estilos aplicados para the flex container element se centered={true} & !variant="scrollable". |
| scroller | .MuiTabs-scroller | Estilos aplicados a the tablist element. |
| fixed | .MuiTabs-fixed | Estilos aplicados para the tablist element se !variant="scrollable". |
| scrollableX | .MuiTabs-scrollableX | Estilos aplicados para the tablist element se variant="scrollable" and orientation="horizontal". |
| scrollableY | .MuiTabs-scrollableY | Estilos aplicados para the tablist element se variant="scrollable" and orientation="vertical". |
| hideScrollbar | .MuiTabs-hideScrollbar | Estilos aplicados para the tablist element se variant="scrollable" and visibleScrollbar={false}. |
| scrollButtons | .MuiTabs-scrollButtons | Estilos aplicados a the ScrollButtonComponent component. |
| scrollButtonsHideMobile | .MuiTabs-scrollButtonsHideMobile | Estilos aplicados para the ScrollButtonComponent component se allowScrollButtonsMobile={true}. |
| indicator | .MuiTabs-indicator | Estilos aplicados a the TabIndicator component. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.