Material-UI (MUI) is a React UI library, built upon Google’s Material Design, providing robust and customizable components for streamlined web development. This article delves into Material UI Card Complex Interaction, highlighting the Card component’s effectiveness in presenting focused content within a defined rectangular box.
Prerequisites:
Approach:
-
State Management:
-
The component uses the
useState
hook to manage a state variable namedexpanded
, initialized tofalse
. - This state tracks whether additional content in the card is expanded or collapsed.
-
The component uses the
-
Custom Styling with Material-UI:
-
The code utilizes Material-UI’s
styled
utility to create a custom-styledIconButton
namedExpandMore
. -
The styling includes a rotation animation for the button icon based on the
expand
prop.
-
The code utilizes Material-UI’s
-
Expand/Collapse Functionality:
-
The
handleExpandClick
function toggles the value ofexpanded
when the user clicks the “Expand more” button. -
This function is triggered by the button’s
onClick
event.
-
The
-
Conditional Rendering with Collapse Component:
-
The card content inside the
Collapse
component is conditionally rendered based on the value ofexpanded
. -
When
expanded
istrue
, additional details about the course are displayed; otherwise, the content is collapsed.
-
The card content inside the
Steps for Creating React Application And Installing Module:
Step 1: Create a react project using the following command.
npx create-react-app gfg_tutorial
Step 2: Get into the project directory
cd gfg_tutorial
Step 3: Install the MUI dependencies as follows:
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/lab
Step 4: Run the project as follows:
npm start
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example 1: In this example, We will design a UI that shows Card Component Complex Interaction.
import * as React from "react" ;
import { Button,
Card,
CardMedia,
CardActions,
CardContent,
} from "@mui/material" ;
import { styled } from "@mui/material/styles" ;
import Typography from "@mui/material/Typography" ;
import IconButton from "@mui/material/IconButton" ;
import Collapse from "@mui/material/Collapse" ;
import ExpandMoreIcon from "@mui/icons-material/ExpandMore" ;
const ExpandMore = styled((props) => { const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({ transform: !expand ? "rotate(0deg)" : "rotate(180deg)" ,
marginLeft: "auto" ,
transition: theme.transitions.create( "transform" , {
duration: theme.transitions.duration.shortest,
}),
})); export default function Demo() {
const [expanded, setExpanded] = React.useState( false );
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<div style={{ margin: 10 }}>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<Card raised={ true } sx={{ maxWidth: 1500 }}>
<CardMedia
component= "img"
height= "300"
image=
alt= "GFG Logo"
/>
<CardContent sx={{ bgcolor: "#E8E8E8" }}>
<h3>DSA Self Paced Course</h3>
<h4 style={{ color: "green" }}>
Most popular course on DSA trusted by over 75,000
students! Built with years of experience by industry
experts and gives you a complete package of video
lectures, practice problems, quizzes, discussion forums
and contests.
<br />
Start Today !
</h4>
</CardContent>
<CardActions>
<Button variant= "contained" color= "warning" >
Share
</Button>
<Button variant= "contained" color= "success" >
Enroll
</Button>
<Button variant= "contained" color= "success" >
Expand more
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label= "show more"
>
<ExpandMoreIcon />
</ExpandMore>
</Button>
</CardActions>
<Collapse in ={expanded} timeout= "auto" unmountOnExit>
<CardContent>
<Typography paragraph>
This course does not require any prior knowledge of
Data Structure and Algorithms and it covers all
topics in two languages: C++ and Java. You will also
learn algorithmic techniques for solving various
problems, get to learn important topics for
interviews and get fluent in the basics of
programming. You will master all the important
topics of data structures and algorithms like
sorting, strings, heaps, DP, searching, trees and
more and even learn this concepts by practicing on
real-world projects. If you have any more queries
you can write to us at courses@geeksforgeeks.org
</Typography>
</CardContent>
</Collapse>
</Card>
</div>
);
} |
Output:
Example 2: In this example, we will see one more UI on the card’s complex layout.
import * as React from 'react' ;
import { Button, Card,
CardActions, CardContent
} from '@mui/material' ;
import { styled } from '@mui/material/styles' ;
import Typography from '@mui/material/Typography' ;
import IconButton from '@mui/material/IconButton' ;
import Collapse from '@mui/material/Collapse' ;
import ExpandMoreIcon from '@mui/icons-material/ExpandMore' ;
const ExpandMore = styled((props) => { const { expand, ...other } = props;
return < IconButton {...other} />
})(({ theme, expand }) => ({ transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)' ,
marginLeft: 'auto' ,
transition: theme.transitions.create( 'transform' , {
duration: theme.transitions.duration.shortest,
}),
})); export default function Demo() {
const [expanded, setExpanded] =
React.useState( false );
const handleExpandClick = () => {
setExpanded(!expanded)
};
return (
<div style={{ margin: 100 }}>
<h1 style={{ color: 'green' }}>
GeeksforGeeks</h1>
<h3>
<u>Welcome Geeks</u>
</h3>
<Card raised={ true }
sx={{ bgcolor: "#E8E8E8" }} >
<CardContent>
<h1>Welcome Page</h1>
<h3>Learn Self Paced Course and
get a high paying job!!
</h3>
</CardContent>
<CardActions >
<Button variant= "outlined"
color= "error" >
Cancel
</Button>
<Button variant= "contained"
color= "success" >
Want to Know more
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label= "show more"
>
<ExpandMoreIcon />
</ExpandMore>
</Button>
</CardActions>
<Collapse in ={expanded} timeout= "auto"
unmountOnExit>
<CardContent>
<Typography paragraph>
This course does not require
any prior knowledge of Data
Structure and Algorithms and it covers
all topics in two languages: C++ and Java.
You will also learn algorithmic techniques for
solving various problems, get to learn important
topics for interviews and get fluent in the
basics of programming. You will master all the
important topics of data structures and algorithms
like sorting, strings, heaps, DP, searching, trees
and more and even learn this concepts by practicing
on real-world projects. If you have any more
queries you can write to us at
courses@geeksforgeeks.org
</Typography>
</CardContent>
</Collapse>
</Card>
</div>
);
} |
Output: