MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the Material UI Card Complex Interaction. The Card component allows the user to show content related to a single subject in a rectangular box.
Import Card API:
import Card from '@mui/material/Card';
// or
import {Card} from '@mui/material';
Approach: Let us create a React Project with the help of the MUI card component. As a result, we will see a UI using the Material UI card component.
Installing and Creating React app, and adding the MUI dependencies:
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 project should look like below:
Project Structure
Example 1: In this example, We will design a UI that shows Card Component Complex Interaction.
App.js
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' }}> neveropen</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.
App.js
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' }}> neveropen</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:
Reference: https://mui.com/material-ui/react-card/#complex-interaction
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
