Material-UI:如何将 Drawer 组件置于 AppBar 下方
Posted
技术标签:
【中文标题】Material-UI:如何将 Drawer 组件置于 AppBar 下方【英文标题】:Material-UI: How to bring the Drawer component below the AppBar 【发布时间】:2021-06-28 02:53:59 【问题描述】:我正在玩 Material UI 抽屉组件,我希望抽屉位于应用栏下方,我想在其中切换汉堡图标的 onclick 以打开和关闭,当我单击汉堡图标时,它应该打开下面的抽屉然后再次点击它,它也应该关闭,我不希望汉堡图标移动它,它应该在一个地方是静态的。它不应该移动,只有抽屉应该打开和移动。我怎么能实现它在材质ui中 https://codesandbox.io/s/material-demo-forked-ehs05?file=/demo.js:0-6433
import React from 'react';
import clsx from 'clsx';
import makeStyles, useTheme from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
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 drawerWidth = 240;
const useStyles = makeStyles((theme) => (
root:
display: 'flex',
,
appBar:
transition: theme.transitions.create(['margin', 'width'],
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
),
,
appBarShift:
width: `calc(100% - $drawerWidthpx)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(['margin', 'width'],
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
),
,
menuButton:
marginRight: theme.spacing(2),
,
hide:
display: 'none',
,
drawer:
width: drawerWidth,
flexShrink: 0,
,
drawerPaper:
width: drawerWidth,
,
drawerHeader:
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: 'flex-end',
,
content:
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create('margin',
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
),
marginLeft: -drawerWidth,
,
contentShift:
transition: theme.transitions.create('margin',
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
),
marginLeft: 0,
,
));
export default function PersistentDrawerLeft()
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () =>
setOpen(true);
;
const handleDrawerClose = () =>
setOpen(false);
;
return (
<div className=classes.root>
<CssBaseline />
<AppBar
position="fixed"
className=clsx(classes.appBar,
[classes.appBarShift]: open,
)
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick=handleDrawerOpen
edge="start"
className=clsx(classes.menuButton, open && classes.hide)
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className=classes.drawer
variant="persistent"
anchor="left"
open=open
classes=
paper: classes.drawerPaper,
>
<div className=classes.drawerHeader>
</div>
<Divider />
<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>
<Divider />
<List>
['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key=text>
<ListItemIcon>index % 2 === 0 ? <InboxIcon /> : <MailIcon /></ListItemIcon>
<ListItemText primary=text />
</ListItem>
))
</List>
</Drawer>
<main
className=clsx(classes.content,
[classes.contentShift]: open,
)
>
<div className=classes.drawerHeader />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
donec massa sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
</Typography>
</main>
</div>
);
【问题讨论】:
【参考方案1】:我希望抽屉在应用栏下方
要将Drawer
放在AppBar
下方,请在AppBar
样式中添加以下行:
appBar:
zIndex: theme.zIndex.drawer + 1, // add this line to increate appBar z-index
,
它应该在一个地方是静止的。它不应该移动
如果您不想在打开Drawer
时移动AppBar
,请删除appBarShift
样式。变化:
<AppBar
position="fixed"
className=clsx(classes.appBar,
[classes.appBarShift]: open,
)
>
收件人:
<AppBar
position="fixed"
className=classes.appBar
>
我不希望汉堡图标在点击时移动
同样,在打开Drawer
时删除使IconButton
隐藏的样式
<IconButton className=classes.menuButton ...props />
当我点击汉堡图标时,它应该打开下面的抽屉,然后再次点击它也应该关闭
将handleDrawerOpen
替换为切换Drawer
的处理程序
const handleToggleDrawer = () =>
setOpen((o) => !o);
;
<IconButton
color="inherit"
aria-label="open drawer"
onClick=handleToggleDrawer
edge="start"
className=classes.menuButton
>
<MenuIcon />
</IconButton>
现场演示
【讨论】:
以上是关于Material-UI:如何将 Drawer 组件置于 AppBar 下方的主要内容,如果未能解决你的问题,请参考以下文章
如何更改 React Material-ui Drawer 菜单项间距?