How to Use Material UI Card Complex Interaction?
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.
Javascript
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" }}>w3wiki</h1> <Card raised={ true } sx={{ maxWidth: 1500 }}> <CardMedia component= "img" height= "300" image= "https://media.w3wiki.net/img-practice/banner/complete-interview-preparation-thumbnail.png?v=19333" 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@w3wiki.net </Typography> </CardContent> </Collapse> </Card> </div> ); } |
Output:
Example 2: In this example, we will see one more UI on the card’s complex layout.
Javascript
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' }}> w3wiki</h1> <h3> <u>Welcome Beginner</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@w3wiki.net </Typography> </CardContent> </Collapse> </Card> </div> ); } |
Output:
Contact Us