在Material-UI上使用带有折叠的菜单作为TransitionComponent,你可以按照以下步骤进行操作:
npm install @material-ui/core
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Collapse, List, ListItem, ListItemText } from '@material-ui/core';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
const useStyles = makeStyles((theme) => ({
nested: {
paddingLeft: theme.spacing(4),
},
}));
const MyComponent = () => {
const classes = useStyles();
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen(!open);
};
return (
<List>
<ListItem button onClick={handleClick}>
<ListItemText primary="菜单标题" />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemText primary="子菜单1" />
</ListItem>
<ListItem button className={classes.nested}>
<ListItemText primary="子菜单2" />
</ListItem>
</List>
</Collapse>
</List>
);
};
export default MyComponent;
在上述代码中,我们使用useState来创建一个名为open的状态变量,用于控制菜单的展开和折叠。handleClick函数用于切换open的值,从而实现菜单的展开和折叠。
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return (
<div>
<MyComponent />
</div>
);
};
export default App;
现在,你就可以在Material-UI上使用带有折叠的菜单作为TransitionComponent了。当点击菜单标题时,子菜单会展开或折叠。
领取专属 10元无门槛券
手把手带您无忧上云