材质UI抽屉组件-我可以删除它添加的叠加层吗? [英] Material UI Drawer Component - Can I remove overlay it adds?

问题描述

我正在尝试使用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道具

    设置了variant="temporary"时，可以使用Modal组件的道具.

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

  这篇关于材质UI抽屉组件-我可以删除它添加的叠加层吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！