Pular para o conteúdo

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';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

The props of the Modal component are available when variant="temporary" is set.

Nome do componente

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

Propriedades

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

NomeTipoPadrãoDescrição
anchor'bottom'
| 'left'
| 'right'
| 'top'
'left'
Side from which the drawer will appear.
childrennode
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
elevationinteger16
The elevation of the drawer.
hideBackdropboolfalse
If true, the backdrop is not rendered.
ModalPropsobject{}
Props applied to the Modal element.
onClosefunc
Callback fired when the component requests to be closed.

Signature:
function(event: object) => void
event: The event source of the callback.
openboolfalse
Control the popup` open state.
PaperPropsobject{}
Props applied to the Paper element.
SlidePropsobject
Props applied to the Slide 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.
transitionDurationnumber
| { 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 regraClasse globalDescrição
root.MuiDrawer-rootEstilos aplicados ao elemento raiz.
docked.MuiDrawer-dockedEstilos aplicados para o elemento raiz se variant="permanent or persistent".
paper.MuiDrawer-paperEstilos aplicados a the Paper component.
paperAnchorLeft.MuiDrawer-paperAnchorLeftEstilos aplicados para the Paper component se anchor="left".
paperAnchorRight.MuiDrawer-paperAnchorRightEstilos aplicados para the Paper component se anchor="right".
paperAnchorTop.MuiDrawer-paperAnchorTopEstilos aplicados para the Paper component se anchor="top".
paperAnchorBottom.MuiDrawer-paperAnchorBottomEstilos aplicados para the Paper component se anchor="bottom".
paperAnchorDockedLeft.MuiDrawer-paperAnchorDockedLeftEstilos aplicados para the Paper component se anchor="left" and variant is not "temporary".
paperAnchorDockedTop.MuiDrawer-paperAnchorDockedTopEstilos aplicados para the Paper component se anchor="top" and variant is not "temporary".
paperAnchorDockedRight.MuiDrawer-paperAnchorDockedRightEstilos aplicados para the Paper component se anchor="right" and variant is not "temporary".
paperAnchorDockedBottom.MuiDrawer-paperAnchorDockedBottomEstilos aplicados para the Paper component se anchor="bottom" and variant is not "temporary".
modal.MuiDrawer-modalEstilos aplicados a the Modal component.

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

Demonstrações