コンポーネントを使用しようとしているのですが、ドロワーに prop が供給されると、基になるページ/div にデフォルトの淡色オーバーレイが表示されるDrawer
ことに気付きました。open={true}
調光を解除するためのマテリアル承認済みのベストプラクティスの方法はありますか? prop を設定することで部分的に成功しましたvariant={"persistent"}
。これにより調光は停止しますが、引き出しを閉じるためだけに閉じるボタンを追加する必要もあります。
私が求めているのは、引き出しの境界の外側をクリックすると引き出しが閉じられること、そして引き出しが開いている間は暗くなるのを止めたい(引き出しを閉じるボタンに頼らずに)ことです。
ドキュメントを見て、プロパティを渡してみました
バリアント={"永続的"}
これによりオーバーレイは削除されますが、ドロワーの外側をクリックしても自動的に閉じなくなります。
<Drawer
open={open}
anchor="top"
onClose={toggleDrawer}
variant={"persistent"}
modal={true}
>
調光機能を(ボタンに頼らずに)解除したいです。
Material 承認済みのオプションはありますか? CSS ハックを試すことはできますが、Material の CSS を壊したり、オーバーレイが点滅したりするのは避けたいです。
ベストアンサー1
あなたは付け加えられます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/modal/#props
BackdropProps
のプロパティを文書化するModal
- https://material-ui.com/api/drawer/#import
コンポーネントのプロパティは、が設定されている
Modal
場合に使用できますvariant="temporary"
。