The Material-UI is an open-source library for Creating user interfaces with Material Design principles in React. Material Design is a design language that provides a consistent look and feel on all platforms and devices. Material-UI provides a set of pre-built components, making it easier for developers to create beautiful and consistent UI.
The Material-UI Collapse component is a way to hide and reveal content on a web page using a smooth transition. It is built on top of the Transition component in Material-UI.
It is easy to use and customize and provides several props and utility functions that can be used to control the animation programmatically. It can be used with components like a Card and list.
Import Collapse API:
import Collapse from '@mui/material/Collapse';
// or
import { Collapse } from '@mui/material';
Props List:
- addEndListener: It allows us to add a custom transition end trigger.
- children: It is used to denote the content node to be Collapsed.
- classes: It is to override or extend the styles applied to the components.
- collapsedSize: It is used to change the width or height of the container when collapsed. By default, it’s set to “0px”.
- component: It is the component used for the root node.
- easing: It’s a transition timing function.
- in: It takes a boolean value to transition. The default is set to false and can be transitioned in when set to “true”.
- orientation: It is the orientation of the transition. By default, it is set to vertical and can be changed to horizontal.
- sx: This prop is used to add custom CSS styles.
- timeout: It is used to specify a single timeout for all transitions, or individually with an object.
CSS Rules:
- root(MuiCollapse-root): The style applied to the root element.
- horizontal (MuiCollapse-horizontal): It is applied to the root element if the orientation=”horizontal”.
- entered(MuiCollapse-entered): It is applied to the root element when the transition has entered.
- hidden(MuiCollapse-hidden): It is applied to the root element when the transition has exited.
- wrapperInner(MuiCollapse-wrapperInner): The styles are applied to the inner wrapper element.
Inheritance: The props from the Transition component from the react-transition-group are also available on Collapse. Various transitions can be achieved with this component.
Approach: Create a React project and install React MUI module.
Creating React Project:
Step 1: Create a react app. Use the command below.
npx create-react-app project_name
Step 2: Move into the folder to perform different operations.
cd project_name
Step 3: Installing MUI modules.
npm install @mui/material @emotion/react npm install @emotion/styled @mui/icons-material
Project Structure:
Example 1: We are creating a UI that shows React MUI Collapse API.
- Filename: App.js
Javascript
import { useState } from "react"; import Card from "@mui/material/Card"; import Collapse from "@mui/material/Collapse"; import CardHeader from "@mui/material/CardHeader"; import Container from "@mui/material/Container"; import CardContent from "@mui/material/CardContent"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; import IconButton from "@mui/material/IconButton"; export default function App() { const [open, setOpen] = useState(false); return ( <> <h1 style={{ display: "flex", justifyContent: "center", color: "green" }}> GeeksForGeeks </h1> <Card sx={{ minWidth: 300, border: "1px solid rgba(211,211,211,0.6)" }}> <CardHeader title="Complete Interview Preparation" action={ <IconButton onClick={() => setOpen(!open)} aria-label="expand" size="small" > {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} </IconButton> } ></CardHeader> <div style={{ backgroundColor: "rgba(211,211,211,0.4)" }}> <Collapse in={open} timeout="auto" unmountOnExit> <CardContent> <Container sx={{ height: 100, lineHeight: 2 }}> An interview-centric course designed to prepare you for the role of SDE for both product and service-based companies. A placement preparation pack built with years of expertise. Learn Resume Building, C++, Java, DSA, CS Theory concepts, Aptitude, Reasoning, LLD, and much more! </Container> </CardContent> </Collapse> </div> </Card> </> ); } |
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: We are creating a UI that shows React MUI Collapse API with list.
Filename: App.js
Javascript
import * as React from "react"; import ListSubheader from "@mui/material/ListSubheader"; import List from "@mui/material/List"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; import Collapse from "@mui/material/Collapse"; import DraftsIcon from "@mui/icons-material/Drafts"; import ExpandLess from "@mui/icons-material/ExpandLess"; import ExpandMore from "@mui/icons-material/ExpandMore"; import PersonIcon from "@mui/icons-material/Person"; import EditIcon from "@mui/icons-material/Edit"; import FaceRetouchingNaturalIcon from "@mui/icons-material/FaceRetouchingNatural"; import ArticleIcon from "@mui/icons-material/Article"; import LogoutIcon from "@mui/icons-material/Logout"; export default function NestedList() { const [open, setOpen] = React.useState(true); const handleClick = () => { setOpen(!open); }; return ( <> <h1 style={{ color: "green" }}> GeeksForGeeks</h1> <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }} component="nav" aria-labelledby="nested-list-subheader" subheader={ <ListSubheader component="div" id="nested-list-subheader"> Setting </ListSubheader> } > <ListItemButton> <ListItemIcon> <PersonIcon /> </ListItemIcon> <ListItemText primary="My Profile" /> </ListItemButton> <ListItemButton> <ListItemIcon> <DraftsIcon /> </ListItemIcon> <ListItemText primary="My Courses" /> </ListItemButton> <ListItemButton onClick={handleClick}> <ListItemIcon> <EditIcon /> </ListItemIcon> <ListItemText primary="Edit" /> {open ? <ExpandLess /> : <ExpandMore />} </ListItemButton> <Collapse in={open} timeout="auto" unmountOnExit> <List component="div" disablePadding> <ListItemButton sx={{ pl: 4 }}> <ListItemIcon> <FaceRetouchingNaturalIcon /> </ListItemIcon> <ListItemText primary="Edit Profile" /> </ListItemButton> <ListItemButton sx={{ pl: 4 }}> <ListItemIcon> <ArticleIcon /> </ListItemIcon> <ListItemText primary="Edit Articles" /> </ListItemButton> </List> </Collapse> <ListItemButton> <ListItemIcon> <LogoutIcon /> </ListItemIcon> <ListItemText primary="Logout" /> </ListItemButton> </List> </> ); } |
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://mui.com/material-ui/api/collapse/
