Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top Material Design by Google. In this article let’s discuss the AccordionSummary API in the Material-UI library.
AccordionSummary API offered by MUI: AccordionSummary API is used when giving a brief summary of an Accordion (Expansion Panel) component.
Importing the API:
import AccordionSummary from '@mui/material/AccordionSummary';
// or
import { AccordionSummary } from '@mui/material';
AccordionSummary props:
- children: It denotes the <option> elements that represent the items in the select list.
- classes: It denotes the styles to override the default ones.
- expandIcon: It denotes the icon to display as the expand indicator
- focusVisibleClassName: It helps identify which DOM element has the keyboard focus.
- sx: It denotes a system prop that allows defining system overrides and additional CSS styles.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material
Project Structure: It will look like the following.
Example 1: In this example, we will try to create a simple application that uses AccordionSummary component to give a brief summary/title to an Accordian. Now write down the following code in the App.js file. Here, App is our default component where we have written our code:
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
App.js
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 SimpleAccordion() { return ( <div> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-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={<ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-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> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Example 2: In this example, let’s change the above code to include a border color of red to the AccordianSummary when the component is focused using keyboard interactions. Change your App.js like the one below.
App.js
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 ArrowForwardIosSharpIcon from '@mui/icons-material/ExpandMore'; import './App.css' export default function SimpleAccordion() { return ( <div> <Accordion> <AccordionSummary expandIcon={<ArrowForwardIosSharpIcon />} aria-controls="panel1a-content" id="panel1a-header" focusVisibleClassName='focus' > <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={<ArrowForwardIosSharpIcon />} aria-controls="panel2a-content" id="panel2a-header" focusVisibleClassName='focus' > <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> ); } |
App.css
.focus { border: 2px solid red !important; } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Reference: https://mui.com/material-ui/api/accordion-summary/
