在大屏幕上默认打开Material UI Mini Variant抽屉,可以通过以下步骤实现:
import React, { useState } 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 ListItemText from '@material-ui/core/ListItemText';
const useStyles = makeStyles((theme) => ({
drawer: {
width: 240,
flexShrink: 0,
},
drawerPaper: {
width: 240,
},
toolbar: theme.mixins.toolbar,
}));
const App = () => {
const classes = useStyles();
const [open, setOpen] = useState(true); // 默认打开抽屉
const handleDrawerToggle = () => {
setOpen(!open);
};
return (
<div>
<Button onClick={handleDrawerToggle}>Toggle Drawer</Button>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.toolbar} />
<List>
<ListItem button>
<ListItemText primary="Item 1" />
</ListItem>
<ListItem button>
<ListItemText primary="Item 2" />
</ListItem>
<ListItem button>
<ListItemText primary="Item 3" />
</ListItem>
</List>
</Drawer>
</div>
);
};
export default App;
在上述代码中,我们使用了useState
来管理抽屉的打开状态,初始状态为true
,即默认打开抽屉。通过handleDrawerToggle
函数来切换抽屉的打开状态。抽屉组件的variant
属性设置为persistent
,表示抽屉始终可见。anchor
属性设置为left
,将抽屉放置在左侧。classes
属性用于自定义样式。
这样,在大屏幕上,默认情况下Material UI Mini Variant抽屉将会被打开显示。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云云服务器负载均衡(CLB)。
请注意,以上答案仅供参考,具体的实现方式可能因项目需求和技术栈而异。
领取专属 10元无门槛券
手把手带您无忧上云