[英]React - Material-UI Accordion: How to center header and expand icon
[英]How to make React Material-UI Accordion fill entire height?
我有 2 个 Material-ui 手风琴,我想通过以下方式将其扩展至全高:
我可以通过以下代码简单地使用 CSS 来实现这一点吗? (认为应该可以使用flex-grow
和flex-direction:column
但我无法让它工作。
https://codesandbox.io/s/upbeat-tesla-uchsb?file=/accordionFullHeight
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
background: 'green',
height: '90vh'
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
export default function SimpleAccordion() {
const classes = useStyles();
return (
<div className={classes.root}>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>Accordion 1</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
<Typography className={classes.heading}>Accordion 2</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
使用一个受控的 Accordion 解决了这个问题,该 Accordion 仅在其展开时使用flex-grow:1
:
https://codesandbox.io/s/upbeat-tesla-uchsb?file=/src/MyAccordion.js
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
background: "red",
color: "blue"
},
rootExpanded: {
background: "blue",
flexGrow: 1
}
}));
export default function MyAccordion(props) {
const classes = useStyles();
const { name } = props;
const [expanded, setExpanded] = React.useState(false);
const rootClass = expanded ? classes.rootExpanded : classes.root;
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
return (
<Accordion
className={rootClass}
expanded={expanded === name}
onChange={handleChange(name)}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id={`${name}-header`}
>
<Typography className={classes.heading}>General settings</Typography>
<Typography className={classes.secondaryHeading}>
I am an accordion
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat.
Aliquam eget maximus est, id dignissim quam.
</Typography>
</AccordionDetails>
</Accordion>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.