React Material UI Expansion Panel And Dialogs

Introduction

 
In this article we will learn how to add dialogs boxes and Expansion Panel in React applications. Expansion Panel is used to show and hide content. Expansion Panel basically manages a large amount of content and list data. Dialogs are used to show notification and alert message.
 
You can check my previous article in which we discussed the basics of Material UI, from the below mentioned links. 
Prerequisites
  • Basic Knowledge of React
  • Visual Studio Code
  • Node and NPM installed
  • Material UI Installed

Create ReactJS project

 
Let's first create a React application using the following command.
  1. npx create-react-app matform    

Install Material-UI

 
Now Install Material-UI by using the following command.
  1. npm install @material-ui/core --save    
Now install Material icons by using the following command.
  1. npm install @material-ui/icons  
Now, right click on "src" folder and add a new component named 'Panel.js
 
First let’s import required material UI component; add the following reference in this component. 
  1. import AppBar from '@material-ui/core/AppBar';  
  2. import Toolbar from '@material-ui/core/Toolbar';  
  3. import ExpansionPanel from '@material-ui/core/ExpansionPanel';  
  4. import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';  
  5. import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';  
  6. import ExpandMoreIcon from '@material-ui/icons/ExpandMore';  
Add the following code in panel component.
  1. import React, { Component } from 'react'    
  2. import AppBar from '@material-ui/core/AppBar';    
  3. import Toolbar from '@material-ui/core/Toolbar';    
  4. import ExpansionPanel from '@material-ui/core/ExpansionPanel';    
  5. import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';    
  6. import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';    
  7. import ExpandMoreIcon from '@material-ui/icons/ExpandMore';    
  8. export class Panel extends Component {    
  9.         render() {    
  10.                 return (    
  11.                  <div>    
  12.                   <AppBar position="static">    
  13.                    <Toolbar style={{ 'paddingLeft'"600px" }}>    
  14.                     Material UI Expansion Panel    
  15.                     </Toolbar>    
  16.                      </AppBar>    
  17.                       <ExpansionPanel>    
  18.                       <ExpansionPanelSummary expandIcon={<ExpandMoreIcon></ExpandMoreIcon>} >    
  19.                         <p>Delhi</p>    
  20.                         </ExpansionPanelSummary>    
  21.                         <ExpansionPanelDetails>    
  22.                         <p>Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000 people </p>    
  23.                       </ExpansionPanelDetails>    
  24.                          </ExpansionPanel>    
  25.                           <ExpansionPanel>    
  26.                             <ExpansionPanelSummary expandIcon={<ExpandMoreIcon></ExpandMoreIcon>} >    
  27.                               <p>Bangalore</p>    
  28.                                </ExpansionPanelSummary>    
  29.                                  <ExpansionPanelDetails>    
  30.                                 <p>   Bengaluru (also called Bangalore) is the capital of India's southern Karnataka state. The center of India's high-tech industry, the city is also known for its parks and nightlife. By Cubbon Park, Vidhana Soudha is a Neo-Dravidian legislative building. Former royal residences include 19th-century Bangalore Palace, modeled after England’s Windsor Castle, an 18th-century teak structure </p>    
  31.                                         </ExpansionPanelDetails>    
  32.                                 </ExpansionPanel>    
  33.                                 <ExpansionPanel >    
  34.                                  <ExpansionPanelSummary expandIcon={<ExpandMoreIcon></ExpandMoreIcon>}        >    
  35.                                    <p>Jaipur</p>    
  36.                                  </ExpansionPanelSummary>    
  37.                                 <ExpansionPanelDetails>    
  38.                        <p>  Jaipur is the capital of India’s Rajasthan state. It evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, colonnaded City Palace comple </p>    
  39.                                         </ExpansionPanelDetails>    
  40.                                 </ExpansionPanel>    
  41.                         </div>    
  42.                 )    
  43.         }    
  44. }    
  45.     
  46. export default Panel     
Now run the project by using 'npm start'.
 
React Material UI Expansion Panel And Dialogs
 
Dialog Box:Dialogs are used to show notification and alert message.
 
Now, right click on "src" folder and add an another component named 'Dialog.js'. In this component we add dialog boxes to show important messages and information.
 
Add the following code in Dialogcomponent. 
  1. import React from 'react';  
  2. import Button from '@material-ui/core/Button';  
  3. import Dialog from '@material-ui/core/Dialog';  
  4. import DialogActions from '@material-ui/core/DialogActions';  
  5. import DialogTitle from '@material-ui/core/DialogTitle';  
  6. import AppBar from '@material-ui/core/AppBar';  
  7. import Toolbar from '@material-ui/core/Toolbar';  
  8.   
  9. export default function Dialogs() {  
  10.   const [state, setstate] = React.useState(false);  
  11.   
  12.   const Open = () => {  
  13.     setstate(true);  
  14.   };  
  15.   
  16.   const Close = () => {  
  17.     setstate(false);  
  18.   };  
  19.   
  20.   return (  
  21.     <div>  
  22.       <AppBar className="mrg" position="static">  
  23.        <Toolbar style={{ 'paddingLeft'"600px" }}>  
  24.            Material UI Dialog  
  25.          </Toolbar>  
  26.         </AppBar>  
  27.       <Button variant="contained" color="primary" onClick={Open}>  
  28.         Open Dialog  
  29.       </Button>  
  30.       <Dialog  
  31.         open={state}  
  32.         onClose={Close}  
  33.         aria-labelledby="alert-dialog-title"  
  34.         aria-describedby="alert-dialog-description" >  
  35.         <DialogTitle id="alert-dialog-title">{"Are you Sure to Delete?"}</DialogTitle>  
  36.         <DialogActions>  
  37.           <Button onClick={Close} color="primary">  
  38.             Yes  
  39.           </Button>  
  40.           <Button onClick={Close} color="primary" autoFocus>  
  41.              No  
  42.           </Button>  
  43.         </DialogActions>  
  44.       </Dialog>  
  45.     </div>  
  46.   );  
  47. }  
Now open app.css file and add the following code
  1. .mrg{  
  2.   margin-top: 20px;  
  3.   margin-bottom: 20px;  
  4. }  
  5. .pding  
  6. {  
  7.   padding-left: 500px;  
  8. }  
Now open app.js file and add the following code. 
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4. import Form from './Form'  
  5. import Dialogs from './Dialog'  
  6.   
  7. function App() {  
  8.   return (  
  9.     <div className="App">  
  10.       <Panel></Panel>  
  11.     </div>  
  12.   );  
  13. }  
  14.   
  15. export default App;  
Now run the project and check the result.
 
React Material UI Expansion Panel And Dialogs
Click on the button,
 
React Material UI Expansion Panel And Dialogs
 

Summary

 
In this article, we learned how we add Expansion Panel and dialogs in Reactjs applications. Expansion Panel is used to show and hide content.


Similar Articles