BottomNavigationAction API
Documentação da API para o componente React BottomNavigationAction . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
// ou
import { BottomNavigationAction } from '@mui/material';
Nome do componente
The nameMuiBottomNavigationAction
can be used when providing default props or style overrides in the theme.Propriedades
Props of the ButtonBase component are also available.
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
children | unsupportedProp | This prop isn't supported. Use the component prop if you need to change the children structure. | |
classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
icon | node | The icon element. | |
label | node | The label element. | |
showLabel | bool | false | If true , the BottomNavigationAction will show its label. By default, only the selected BottomNavigationAction inside BottomNavigation will show its label.The prop defaults to the value ( false ) inherited from the parent BottomNavigation component. |
sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
value | any | You can provide your own value. Otherwise, we fallback to the child position index. |
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 BottomNavigationAction. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
Nome da regra | Classe global | Descrição |
---|---|---|
root | .MuiBottomNavigationAction-root | Estilos aplicados ao elemento raiz. |
selected | .Mui-selected | Pseudo-class aplicada a o elemento raiz se selected. |
iconOnly | .MuiBottomNavigationAction-iconOnly | Pseudo-class aplicada a o elemento raiz se showLabel={false} and not selected. |
label | .MuiBottomNavigationAction-label | Estilos aplicados a the label's span element. |
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
styleOverrides
property in a custom theme.