BottomNavigationAction API
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
Propriedades do componente ButtonBase também estão disponíveis.
| 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 | 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. | |
| 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
While not explicitly documented above, the props of the ButtonBase component are also available on BottomNavigationAction. You can take advantage of this to target nested components.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
styleOverridesproperty in a custom theme.