我使用 Material-UI 创建了一个下拉菜单,但发现一件烦人的事情:我想让我的下拉菜单在单击时出现在栏下方,但每次它都只是覆盖栏(如图以下)
有什么办法可以让下拉菜单出现在栏下方? (不包括 Your order
标签和数字)
我的代码如下:我尝试修改anchorOrigin
属性(property)和transformOrigin
属性(property),但它没有工作。
<Menu
id="order-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
elevation={20}
getContentAnchorEl={null}
anchorOrigin={{ vertical: "bottom", horizontal: "center", }}
transformOrigin={{ vertical: -100, horizontal: 150, }} >
我将非常感谢您的帮助!
最佳答案
这是一个将菜单的顶部中心 ( transformOrigin
) 与按钮的底部中心 ( anchorOrigin
) 对齐的示例:
import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MuiMenuItem from "@material-ui/core/MenuItem";
import styled from "styled-components";
const MenuItem = styled(MuiMenuItem)`
justify-content: flex-end;
`;
export default function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
getContentAnchorEl={null}
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ horizontal: "center" }}
>
<MenuItem onClick={handleClose}>1</MenuItem>
<MenuItem onClick={handleClose}>2</MenuItem>
<MenuItem onClick={handleClose}>3</MenuItem>
<MenuItem onClick={handleClose}>10</MenuItem>
<MenuItem onClick={handleClose}>20</MenuItem>
<MenuItem onClick={handleClose}>300</MenuItem>
</Menu>
</div>
);
}
相关文档:https://material-ui.com/api/popover/#props
关于javascript - 如何使下拉菜单恰好出现在 Material-UI 中的栏下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62819734/