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
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
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/