作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Reactjs 中的 Material 来实现一棵树。但是,根据我的设计,折叠和展开的按钮应该在右侧。
另外,在 TreeItem
中添加图标时出现错误像这样:
<TreeItem nodeId="1" label="RSMSSB" icon={FolderIcon}>
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TreeItem from "@material-ui/lab/TreeItem";
import FolderIcon from '@material-ui/icons/Folder';
const useStyles = makeStyles({
root: {
height: 216,
flexGrow: 1,
maxWidth: 400
}
});
export default function ControlledTreeView() {
const classes = useStyles();
const [expanded, setExpanded] = React.useState([]);
const handleChange = (event, nodes) => {
setExpanded(nodes);
};
return (
<TreeView
className={classes.root}
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
expanded={expanded}
onNodeToggle={handleChange}
>
<TreeItem nodeId="1" label="RSMSSB" icon={FolderIcon}>
<TreeItem nodeId="2" label="Science"></TreeItem>
<TreeItem nodeId="3" label="Mathematics">
<TreeItem nodeId="4" label="Polynomials"></TreeItem>
<TreeItem nodeId="7" label="Inequalities"></TreeItem>
</TreeItem>
<TreeItem nodeId="8" label="English"></TreeItem>
</TreeItem>
</TreeView>
);
}
最佳答案
基于 Customized tree view例如,您可以创建一个自定义组件,该组件将文本和图标传递给 TreeItem
的标签属性。并在右侧添加展开/折叠图标 flex-direction: row-reverse;
到 TreeItem
的内容类:
const useTreeItemStyles = makeStyles(theme => ({
content: {
flexDirection: 'row-reverse'
},
labelRoot: {
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0.5, 0),
},
labelIcon: {
marginRight: theme.spacing(1),
},
labelText: {
fontWeight: 'inherit',
flexGrow: 1,
},
}));
function StyledTreeItem(props) {
const classes = useTreeItemStyles();
const { labelText, labelIcon: LabelIcon, ...other } = props;
return (
<TreeItem
label={
<div className={classes.labelRoot}>
<LabelIcon color="inherit" className={classes.labelIcon} />
<Typography variant="body2" className={classes.labelText}>
{labelText}
</Typography>
</div>
}
classes={{
content: classes.content
}}
{...other}
/>
);
}
...
<TreeView
className={classes.root}
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
expanded={expanded}
onNodeToggle={handleChange}
>
<StyledTreeItem nodeId="1" labelText="RSMSSB" labelIcon={FolderIcon} />
...
关于reactjs - 如何将折叠/展开图标更改为 Material TreeView 的右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59819211/
我是一名优秀的程序员,十分优秀!