问题描述
我正在尝试使用Drawer组件,并且我已经注意到,当给抽屉提供prop open = {true}时,基础页面/div上有一个默认的暗淡覆盖.
I am trying to use the Drawer component and I have noticed that when the drawer is fed the prop open={true}, there is a default dimmed overlay on the underlying page / div.
是否有最佳实践材料批准的方法来消除调光?我在设置道具variant={"persistent"}
上取得了部分成功.这将停止调光,但也迫使我添加一个关闭按钮,仅用于关闭抽屉.
Is there a best-practice Material-approved way to remove the dimming? I have had some partial success with setting the prop variant={"persistent"}
. This stops the dimming, but it also forces me to add a close button just to close the drawer.
我要寻找的是在其边界之外单击时可关闭的抽屉,当它打开时,我希望调光消失(无需借助按钮来关闭抽屉).
What I am looking for is the drawer to be closable when clicking outside its boundary, and while it is open I would like to have the dimming go away (without resorting to a button to close the drawer).
我看了看文档并尝试通过道具
I have looked at the docs and tried passing the prop
variant = {永久"}
variant={"persistent"}
摆脱了重叠,但是现在当我在抽屉外面单击时,它不会自动关闭.
Which gets rid of the overlay, but now when I click outside the drawer it doesn't auto-close.
<Drawer
open={open}
anchor="top"
onClose={toggleDrawer}
variant={"persistent"}
modal={true}
>
我希望调光消失(不求助于按钮).
I would like to have the dimming go away (without resorting to a button).
是否有任何已批准的材料"选项?我可以尝试CSS hack,但我不想破坏Material的CSS或出现闪烁的叠加层.
Are there any options that are Material - approved? I can try CSS hacks but I don't want to break Material's CSS or have glitchy flashes of overlay.
推荐答案
您可以添加BackdropProps={{ invisible: true }}
.
工作示例:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import Button from "@material-ui/core/Button";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
const useStyles = makeStyles({
list: {
width: 250
}
});
export default function TemporaryDrawer() {
const classes = useStyles();
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false
});
const toggleDrawer = (side, open) => event => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);
return (
<div>
<Button onClick={toggleDrawer("left", true)}>Open Left</Button>
<Drawer
BackdropProps={{ invisible: true }}
open={state.left}
onClose={toggleDrawer("left", false)}
>
{sideList("left")}
</Drawer>
</div>
);
}
相关文档链接:
- https://material-ui.com/api/backdrop/#props
- 记录
invisible
道具
- https://material-ui.com/api/backdrop/#props
- Documents the
invisible
prop
- 记录
Modal
的
BackdropProps
道具 - Documents the
这篇关于材质UI抽屉组件-我可以删除它添加的叠加层吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
- 记录