我正在尝试使用Material-UI中的ExpansionPanel组件,但是我试图弄清楚如何启用在ExpansionPanelSummary上选择文本,以便用户可以在摘要中复制/粘贴文本。
ExpansionPanelSummary
利用ButtonBase作为其根组件。这意味着它将整个摘要视为一个按钮来控制展开/折叠。
中的CSSButtonBase
指定userSelect: 'none'
了禁用元素中文本的选择。
下面的示例显示了一种覆盖此方法:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
"& .MuiExpansionPanelSummary-root": {
userSelect: "auto"
}
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
}
}));
export default function SimpleExpansionPanel() {
const classes = useStyles();
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>Expansion Panel 1</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
<Typography className={classes.heading}>Expansion Panel 2</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel disabled>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3a-content"
id="panel3a-header"
>
<Typography className={classes.heading}>
Disabled Expansion Panel
</Typography>
</ExpansionPanelSummary>
</ExpansionPanel>
</div>
);
}
相关文件:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句