You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.1 KiB
68 lines
2.1 KiB
import * as React from "react";
|
|
import { styled } from "@mui/material/styles";
|
|
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
|
|
import MuiAccordion from "@mui/material/Accordion";
|
|
import MuiAccordionSummary from "@mui/material/AccordionSummary";
|
|
import MuiAccordionDetails from "@mui/material/AccordionDetails";
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
const Accordion = styled((props) => (
|
|
<MuiAccordion disableGutters elevation={0} square {...props} />
|
|
))(({ theme }) => ({
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
"&:not(:last-child)": {
|
|
borderBottom: 0
|
|
},
|
|
"&:before": {
|
|
display: "none"
|
|
}
|
|
}));
|
|
|
|
const AccordionSummary = styled((props) => (
|
|
<MuiAccordionSummary
|
|
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
|
|
{...props}
|
|
/>
|
|
))(({ theme }) => ({
|
|
backgroundColor:
|
|
theme.palette.mode === "dark"
|
|
? "rgba(255, 255, 255, .05)"
|
|
: "rgba(0, 0, 0, .03)",
|
|
flexDirection: "row-reverse",
|
|
"& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
|
|
transform: "rotate(90deg)"
|
|
},
|
|
"& .MuiAccordionSummary-content": {
|
|
marginLeft: theme.spacing(1)
|
|
}
|
|
}));
|
|
|
|
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
|
|
padding: theme.spacing(2),
|
|
borderTop: "1px solid rgba(0, 0, 0, .125)"
|
|
}));
|
|
|
|
export default function CustomizedAccordions() {
|
|
const [expanded, setExpanded] = React.useState("panel1");
|
|
|
|
const handleChange = (panel) => (event, newExpanded) => {
|
|
setExpanded(newExpanded ? panel : false);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Accordion
|
|
expanded={expanded === this.props.article.title}
|
|
onChange={handleChange(this.props.article.title)}
|
|
>
|
|
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
|
|
<Typography>{this.props.article.title}</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>{this.props.article.text}</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|