Pular para o conteúdo

Tab API

Documentação da API para o componente React Tab . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Tab from '@mui/material/Tab';
// ou
import { Tab } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiTab can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente ButtonBase também estão disponíveis.

NomeTipoPadrãoDescrição
childrenunsupportedProp
This prop isn't supported. Use the component prop if you need to change the children structure.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
disabledboolfalse
Se true, o componente está desabilitado.
disableFocusRippleboolfalse
If true, the keyboard focus ripple is disabled.
disableRippleboolfalse
If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName.
iconelement
| string
The icon element.
iconPosition'bottom'
| 'end'
| 'start'
| 'top'
'top'
The position of the icon relative to the label.
labelnode
The label element.
sxArray<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.
valueany
You can provide your own value. Otherwise, we fallback to the child position index.
wrappedboolfalse
Tab labels appear in a single row. They can use a second line if needed.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente ButtonBase também estão disponíveis em Tab. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regraClasse globalDescrição
root.MuiTab-rootEstilos aplicados ao elemento raiz.
labelIcon.MuiTab-labelIconEstilos aplicados para o elemento raiz se both icon and label are provided.
textColorInherit.MuiTab-textColorInheritEstilos aplicados para o elemento raiz se the parent [Tabs](/material-ui/api/tabs/) has textColor="inherit".
textColorPrimary.MuiTab-textColorPrimaryEstilos aplicados para o elemento raiz se the parent [Tabs](/material-ui/api/tabs/) has textColor="primary".
textColorSecondary.MuiTab-textColorSecondaryEstilos aplicados para o elemento raiz se the parent [Tabs](/material-ui/api/tabs/) has textColor="secondary".
selected.Mui-selectedPseudo-class aplicada a o elemento raiz se selected={true} (controlled by the Tabs component).
disabled.Mui-disabledPseudo-class aplicada a o elemento raiz se disabled={true} (controlled by the Tabs component).
fullWidth.MuiTab-fullWidthEstilos aplicados para o elemento raiz se fullWidth={true} (controlled by the Tabs component).
wrapped.MuiTab-wrappedEstilos aplicados para o elemento raiz se wrapped={true}.
iconWrapper.MuiTab-iconWrapperStyles applied to the wrapper element of `icon` if icon is provided.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações