Drawer API
Documentação da API para o componente React Drawer . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import Drawer from '@mui/material/Drawer';
// ou
import { Drawer } from '@mui/material';The props of the Modal component are available
when variant="temporary" is set.
Nome do componente
The nameMuiDrawer 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 |
|---|---|---|---|
| anchor | 'bottom' | 'left' | 'right' | 'top' | 'left' | Side from which the drawer will appear. |
| 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. | |
| elevation | integer | 16 | The elevation of the drawer. |
| hideBackdrop | bool | false | If true, the backdrop is not rendered. |
| ModalProps | object | {} | Props applied to the Modal element. |
| onClose | func | Callback fired when the component requests to be closed. Signature: function(event: object) => voidevent: The event source of the callback. | |
| open | bool | false | Control the popup` open state. |
| PaperProps | object | {} | Props applied to the Paper element. |
| SlideProps | object | Props applied to the Slide element. | |
| 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. | |
| transitionDuration | number | { appear?: number, enter?: number, exit?: number } | { enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
| variant | 'permanent' | 'persistent' | 'temporary' | 'temporary' | A variante a usar. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiDrawer-root | Estilos aplicados ao elemento raiz. |
| docked | .MuiDrawer-docked | Estilos aplicados para o elemento raiz se variant="permanent or persistent". |
| paper | .MuiDrawer-paper | Estilos aplicados a the Paper component. |
| paperAnchorLeft | .MuiDrawer-paperAnchorLeft | Estilos aplicados para the Paper component se anchor="left". |
| paperAnchorRight | .MuiDrawer-paperAnchorRight | Estilos aplicados para the Paper component se anchor="right". |
| paperAnchorTop | .MuiDrawer-paperAnchorTop | Estilos aplicados para the Paper component se anchor="top". |
| paperAnchorBottom | .MuiDrawer-paperAnchorBottom | Estilos aplicados para the Paper component se anchor="bottom". |
| paperAnchorDockedLeft | .MuiDrawer-paperAnchorDockedLeft | Estilos aplicados para the Paper component se anchor="left" and variant is not "temporary". |
| paperAnchorDockedTop | .MuiDrawer-paperAnchorDockedTop | Estilos aplicados para the Paper component se anchor="top" and variant is not "temporary". |
| paperAnchorDockedRight | .MuiDrawer-paperAnchorDockedRight | Estilos aplicados para the Paper component se anchor="right" and variant is not "temporary". |
| paperAnchorDockedBottom | .MuiDrawer-paperAnchorDockedBottom | Estilos aplicados para the Paper component se anchor="bottom" and variant is not "temporary". |
| modal | .MuiDrawer-modal | Estilos aplicados a the Modal component. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- Com um nome de classe global.
- Com um nome de regra como parte da propriedade
styleOverridesdo componente em um tema personalizado.