What is Material Ui

Material Ui is developed by Google, for implementing more Responsive and creative webpages. Material Ui is fully using grid-based layouts, animations, transitions, padding, and many different effects. Material Ui is mostly inspired by the real-time objects and actions associated with it and it presents those objects more responsively. Material Ui is similar to Bootstrap as it contains so many built-in classes in it, in the same way, Material Ui has many built-in  Components stored in it, it is containing of ready to use styled-components in it and it contains many icons which make react pages more beautiful and responsive. As we know that Material Ui is used in react pages to implement Google material design. 

Material Ui

• Material Ui is one of the most famous and mostly used React framework components.

• It is an open-source React Components library for implementing Google Material Design.

• It is a Collection of built-in components which can be directly called in the function.

• It is mostly used for designing handsome and beautiful responsive web pages.

• It is React Component Library.

• It is an Artificial and Ready-made Component that is already built inside it. 

• It contains built-in CSS embedded in it.

Advantages of Material Ui

• Loads Faster

• Pre-designed Components

• Easily Handled

• Larger Community

• Open Source

• Customizable Theme

• Well Structured Documentation 

• Cross Platform Compatibility

Installing Material Ui 

      npm install @mui/material 

As Material Ui contains many components, in this article we discuss the few components in the given article.

Components are divided into a few classes:

• Surfaces

• Inputs

• Data display

• Feed Back

• Navigation

• Layouts

In this article, we discuss the surface components

The material Surface is classified as opaque white, 1dp thickness, and has a shadow associated with it.

Types of Surface:

• App Bar

• Accordion

• Card

App Bar

• It is used for displaying information and actions related to the screen.

• It is mostly used by users to navigate many web pages and platforms.

• It appears on top of the webpage.

• App bar can store content in the form of lists, links, buttons, search, and icons and implements its actions in it.

• It can allow other components to showcase the content in the App bar itself.

• It is ready to use nav bar, which contains all the features of a nav bar which can be used as a head of the webpage. 

    Source Code

     import * as React from "react";

    import AppBar from "@mui/material/AppBar";

    export default function appear() {

            return (

                <div>

                <AppBar color="primary" postion="static">

                    <h2>My header</h2>

                </AppBar>

                </div>

            );

   }    

        

Accordion

• It is a type of surface component which is used for hiding and displaying content of sections in a related page.

• It is frequently used for hiding and displaying data on the page.

• Accordions are used when toggling between the showing and hiding of different sections.

   Source Code

    import * as React from "react" ;
    import Accordion from "@mui/material/Accordion";
    import AccordionSummary from "@mui/material/AccordionSummary";
    import AccordionDetails from "@mui/material/AccordionDetails";
    import Typography from "@mui/material/Typography";
    import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

    export default function accordion() {

    return (
    <div>
    <Accordion>
    <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel1a-content"
    id="panel1a-header"
    >
    <Typography>Accordion 1</Typography>
    </AccordionSummary>
    <AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
    </AccordionDetails>
     </Accordion>
    <Accordion>
    <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel2a-content"
    id="panel2a-header"
    >
    <Typography>Accordion 2</Typography>
    </AccordionSummary>
    <AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
    </AccordionDetails>
    </Accordion>
    </div>
    );
    }

Card

• A card is a type of surface component which contains details about a single topic.

• It contains data on a single subject.

• It is like a box-shaped structure, which contains information about a single topic.

• The card can store the other components' actions like buttons, links, Typography, and so on.

  

Source Code

    import * as React from "react";
    import Card from "@mui/material/Card";
    import CardContent from "@mui/material/CardContent";
    import Typography from "@mui/material/Typography";
    export default function card() {
    return (
    <Card sx={{ maxWidth: 300 }} align="center">
    <CardContent>
    <Typography sx={{ font size: 35 }} color="orange" gutterBottom>
    MayhemCode
    </Typography>
    <Typography sx={{ MB: 1.5 }} color="blue">
    Blogging Website
    </Typography>
    <Typography color="light blue" align="right">
    Amaansmd
    <br />
    Blogger &nbsp;&nbsp;&nbsp;&nbsp;
    </Typography>
    </CardContent>
    </Card>
    );
    }

As in the above article, we have given brief information about the Material Ui and its Components
and explained the types of surface components with each example and its features.