forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[material-ui][docs] Revise the Accordion page (mui#40284)
Co-authored-by: Danilo Leal <[email protected]> Co-authored-by: Sam Sycamore <[email protected]> Co-authored-by: Diego Andai <[email protected]>
- Loading branch information
Showing
11 changed files
with
503 additions
and
36 deletions.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
docs/data/material/components/accordion/AccordionExpandDefault.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import * as React from 'react'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
|
|
||
| export default function AccordionExpandDefault() { | ||
| return ( | ||
| <div> | ||
| <Accordion defaultExpanded> | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| aria-controls="panel1-content" | ||
| id="panel1-header" | ||
| > | ||
| <Typography>Expanded by default</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="panel2-content" | ||
| id="panel2-header" | ||
| > | ||
| <Typography>Header</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> | ||
| ); | ||
| } |
43 changes: 43 additions & 0 deletions
43
docs/data/material/components/accordion/AccordionExpandDefault.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import * as React from 'react'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
|
|
||
| export default function AccordionExpandDefault() { | ||
| return ( | ||
| <div> | ||
| <Accordion defaultExpanded> | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| aria-controls="panel1-content" | ||
| id="panel1-header" | ||
| > | ||
| <Typography>Expanded by default</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="panel2-content" | ||
| id="panel2-header" | ||
| > | ||
| <Typography>Header</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> | ||
| ); | ||
| } |
44 changes: 44 additions & 0 deletions
44
docs/data/material/components/accordion/AccordionExpandIcon.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import * as React from 'react'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; | ||
| import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; | ||
|
|
||
| export default function AccordionExpandIcon() { | ||
| return ( | ||
| <div> | ||
| <Accordion> | ||
| <AccordionSummary | ||
| expandIcon={<ArrowDownwardIcon />} | ||
| aria-controls="panel1-content" | ||
| id="panel1-header" | ||
| > | ||
| <Typography>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={<ArrowDropDownIcon />} | ||
| aria-controls="panel2-content" | ||
| id="panel2-header" | ||
| > | ||
| <Typography>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> | ||
| ); | ||
| } |
44 changes: 44 additions & 0 deletions
44
docs/data/material/components/accordion/AccordionExpandIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import * as React from 'react'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; | ||
| import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; | ||
|
|
||
| export default function AccordionExpandIcon() { | ||
| return ( | ||
| <div> | ||
| <Accordion> | ||
| <AccordionSummary | ||
| expandIcon={<ArrowDownwardIcon />} | ||
| aria-controls="panel1-content" | ||
| id="panel1-header" | ||
| > | ||
| <Typography>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={<ArrowDropDownIcon />} | ||
| aria-controls="panel2-content" | ||
| id="panel2-header" | ||
| > | ||
| <Typography>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> | ||
| ); | ||
| } |
59 changes: 59 additions & 0 deletions
59
docs/data/material/components/accordion/AccordionTransition.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import * as React from 'react'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import Fade from '@mui/material/Fade'; | ||
|
|
||
| export default function AccordionTransition() { | ||
| const [expanded, setExpanded] = React.useState(false); | ||
|
|
||
| const handleExpansion = () => { | ||
| setExpanded((prevExpanded) => !prevExpanded); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Accordion | ||
| expanded={expanded} | ||
| onChange={handleExpansion} | ||
| TransitionComponent={Fade} | ||
| TransitionProps={{ timeout: 200 }} | ||
| sx={{ | ||
| '& .MuiAccordion-region': { height: expanded ? 'auto' : 0 }, | ||
| '& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' }, | ||
| }} | ||
| > | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| aria-controls="panel1-content" | ||
| id="panel1-header" | ||
| > | ||
| <Typography>Custom transition using Fade</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="panel2-content" | ||
| id="panel2-header" | ||
| > | ||
| <Typography>Default transition using Collapse</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> | ||
| ); | ||
| } |
59 changes: 59 additions & 0 deletions
59
docs/data/material/components/accordion/AccordionTransition.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import * as React from 'react'; | ||
| import Accordion, { AccordionProps } from '@mui/material/Accordion'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import Fade from '@mui/material/Fade'; | ||
|
|
||
| export default function AccordionTransition() { | ||
| const [expanded, setExpanded] = React.useState(false); | ||
|
|
||
| const handleExpansion = () => { | ||
| setExpanded((prevExpanded) => !prevExpanded); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Accordion | ||
| expanded={expanded} | ||
| onChange={handleExpansion} | ||
| TransitionComponent={Fade as AccordionProps['TransitionComponent']} | ||
| TransitionProps={{ timeout: 200 }} | ||
| sx={{ | ||
| '& .MuiAccordion-region': { height: expanded ? 'auto' : 0 }, | ||
| '& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' }, | ||
| }} | ||
| > | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| aria-controls="panel1-content" | ||
| id="panel1-header" | ||
| > | ||
| <Typography>Custom transition using Fade</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="panel2-content" | ||
| id="panel2-header" | ||
| > | ||
| <Typography>Default transition using Collapse</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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import * as React from 'react'; | ||
| import Accordion from '@mui/material/Accordion'; | ||
| import AccordionActions from '@mui/material/AccordionActions'; | ||
| import AccordionSummary from '@mui/material/AccordionSummary'; | ||
| import AccordionDetails from '@mui/material/AccordionDetails'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import Button from '@mui/material/Button'; | ||
|
|
||
| export default function AccordionUsage() { | ||
| return ( | ||
| <div> | ||
| <Accordion> | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| aria-controls="panel1-content" | ||
| id="panel1-header" | ||
| > | ||
| Accordion 1 | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse | ||
| malesuada lacus ex, sit amet blandit leo lobortis eget. | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| <Accordion> | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| aria-controls="panel2-content" | ||
| id="panel2-header" | ||
| > | ||
| Accordion 2 | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse | ||
| malesuada lacus ex, sit amet blandit leo lobortis eget. | ||
| </AccordionDetails> | ||
| </Accordion> | ||
| <Accordion defaultExpanded> | ||
| <AccordionSummary | ||
| expandIcon={<ExpandMoreIcon />} | ||
| aria-controls="panel3-content" | ||
| id="panel3-header" | ||
| > | ||
| Accordion Actions | ||
| </AccordionSummary> | ||
| <AccordionDetails> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse | ||
| malesuada lacus ex, sit amet blandit leo lobortis eget. | ||
| </AccordionDetails> | ||
| <AccordionActions> | ||
| <Button>Cancel</Button> | ||
| <Button>Agree</Button> | ||
| </AccordionActions> | ||
| </Accordion> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.