Popover API
Documentação da API para o componente React Popover . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import Popover from '@mui/material/Popover';
// ou
import { Popover } from '@mui/material';Nome do componente
The nameMuiPopover can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente Modal também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| open* | bool | false | Control the popup` open state. |
| action | ref | A ref for imperative actions. It currently only supports updatePosition() action. | |
| anchorEl | HTML element | func | A HTML element, or a function that returns it. It's used to set the position of the popover. | |
| anchorOrigin | { horizontal: 'center' | 'left' | 'right' | number, vertical: 'bottom' | 'center' | 'top' | number } | { vertical: 'top', horizontal: 'left', } | This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'.Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
| anchorPosition | { left: number, top: number } | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | |
| anchorReference | 'anchorEl' | 'anchorPosition' | 'none' | 'anchorEl' | This determines which anchor prop to refer to to set the position of the popover. |
| 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. | |
| container | HTML element | func | A HTML element, component instance, or function that returns either. The container will passed to the Modal component.By default, it uses the body of the anchorEl's top-level document object, so it's simply document.body most of the time. | |
| elevation | integer | 8 | The elevation of the popover. |
| marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. |
| onClose | func | Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose. | |
| PaperProps | { component?: element type } | {} | Props applied to the Paper 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. | |
| transformOrigin | { horizontal: 'center' | 'left' | 'right' | number, vertical: 'bottom' | 'center' | 'top' | number } | { vertical: 'top', horizontal: 'left', } | This is the point on the popover which will attach to the anchor's origin. Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
| TransitionComponent | elementType | Grow | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
| transitionDuration | 'auto' | number | { appear?: number, enter?: number, exit?: number } | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
| TransitionProps | object | {} | Props applied to the transition element. By default, the element is based on this Transition component. |
O
ref é encaminhado para o elemento raiz.Herança
Embora não explicitamente documentado acima, as propriedades do componente Modal também estão disponíveis em Popover. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiPopover-root | Estilos aplicados ao elemento raiz. |
| paper | .MuiPopover-paper | Estilos aplicados a the Paper 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.