32 lines
940 B
TypeScript
32 lines
940 B
TypeScript
|
import Typography from '@mui/material/Typography';
|
||
|
|
import Button from '@mui/material/Button';
|
||
|
|
import Popover from '@mui/material/Popover';
|
||
|
|
import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
|
||
|
|
|
||
|
|
export default function PopoverPopupState() {
|
||
|
|
return (
|
||
|
|
<PopupState variant="popover" popupId="demo-popup-popover">
|
||
|
|
{(popupState) => (
|
||
|
|
<div>
|
||
|
|
<Button variant="contained" {...bindTrigger(popupState)}>
|
||
|
|
Open Popover
|
||
|
|
</Button>
|
||
|
|
<Popover
|
||
|
|
{...bindPopover(popupState)}
|
||
|
|
anchorOrigin={{
|
||
|
|
vertical: 'bottom',
|
||
|
|
horizontal: 'center',
|
||
|
|
}}
|
||
|
|
transformOrigin={{
|
||
|
|
vertical: 'top',
|
||
|
|
horizontal: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</PopupState>
|
||
|
|
);
|
||
|
|
}
|