Material UI Basics

Introduction:

• Material-UI is a popular open-source library for building user interfaces in React.
• Use for make beautiful design with React JS.
• Using this, website UI looks like mobile app.
• Material-UI offers a wide range of ready-to-use components such as buttons, forms, navigation bars, dialog boxes, icons, and more, which can be easily integrated into React applications.
• Material UI is also used with other framework, such as Angular and Vue.js
• Sources for each framework is different.
• Current Version in v5
• Initial release in 2014.

Installation

• Node Js and NPM should be installed.
• Create react app
• Install Material UI
  • For v4
    • npm install @material-ui/core
    • Add CSS in index.html
      • <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
  • For v5
    • npm install @mui/material @emotion/react @emotion/styled
    • npm install @fontsource/roboto
• Import material-ui on component where it is used.
  • Example mentioned below:
    • import Button from ‘@mui/material/Button’; (v5)
    • import {Button} from ‘@mui/material’; (v5)
    • import {Button} from ‘@material-ui/core’; (v4)
    • import Button from ‘@material-ui/core/Button’; (v4)

Button

• Use of buttons
  • color=”defaul/inherit/primary/secondary” => To change color
  • variant=”contained/outlined/text”
    • contained=> For background color
    • Outlined=> For Border Color
    • Text => For text color (is default)
• Icon with button
  • Install package
    • npm install @mui/icons-material (v5)
    • npm install @material-ui/icons(v4)
      • To Use:
        • import Delete from @material-ui/icons/Delete
        • startIcon={<Delete/>}
        • endIcon={<Delete />}
• Button size
  • size=”small/medium/large” => Default is medium

ButtonGroup

• To Use:
  • Import buttongroup
    • import {ButtonGroup,Button} from @material-ui/core

		Wrap buttons in ButtonGroup
		<ButtonGroup 
			orientation=”horizontal/vertical”
			>
			<Button >But 1</Button>
			<Button >But 2</Button>
			<Button >But 3</Button>
		</ ButtonGroup>
	
Checkbox

• Import checkbox
  • import {checkbox} from @material-ui/core
  • import from @material-ui/core/checkbox
• color of checkbox
  • <Checkbox color=”default/primary/secondary” />
• indeterminate property in checkbox
• custom icon in checkbox
  • icon={<FavoriteBorder />}
  • checkedIcon={<Favorite />}

Radio Button

• use of radio button
  • import {Radio} from @material-ui/core
  • import Radio from @material-ui/core/Radio
• Import radio button
• color of radio button
• onChange event on radio button
• use state with radio button

Slider

• use of Slider
  • Used slide between a range
• Import Slider
  • import {Slider} from @material-ui/core
  • import Slider from @material-ui/core/Slider
• color of Slider
• defaultValue

marks={function_name} // to display current text of slider

• maxValue
• show marks
• show Label
• onChange event on Slider
• vertical Slider

Range Slider

• Use Slider
• Make it Range slider by value
• Add change event
• Update value with state

Select

• Select Box or Select
• Use Select
  • import {Select, MenuItem} from ‘@material-ui/core’
• Use MenuItem to make a dropdown
• PlaceHolder
• use state with a value
• onChange event

    const updateValue=(e)=>{
        setCourse(e.target.value);
    }

    <select
        value={ course}
        displayEmpty
        onChange={updateValue}
    >
        <MenuItem value =''>Select Course</MenuItem>
        <MenuItem value ={1}>Node</MenuItem>
        <MenuItem value ={2}>JavaScript</MenuItem>
        <MenuItem value ={3}>Java</MenuItem>
        <MenuItem value ={4}>PHP</MenuItem>
    </select >

Text Field

• use TextField
• import TextField
  • import {TextField} from ‘@material-ui/core’
• add placeholder
• change look and feel
• change type of TextField
• get value of TextField with onChange event

    <TextField
        label=”enter name” // placeholder
        color=”primary/secondary”
        varient=”outlined/contained”
        onChange={getdata}
    />

Switch

• Import Switch
  • import {Switch} from ‘@material-ui/core’
• How to Use
  • Put <Switch /> where need to use
• color
  • <Switch color={default|primary|secondary} />
• Size
  • <Switch size={small|medium} />
• onChange event
  • <Switch onChange={()=>getValue()} />
• get value
  • const getValue = (e,val)=>{
    } <Switch onChange={()=>getValue()} />

Box|Layout

• Use of Box
  • Box is a part of Layout.
  • Box create a wrapper.
  • Box is used to manage Layout, it is not used to take input.
• Import Box and Button
  • import {Box, Button} from ‘@material-ui/core’
• use element with Box
  • <Box component=”span” style={{color:’red’}} clone m=”10” p=”10”>
    </Box>
• use style with Box
  • In the above example clone will apply all the style with inner element.
• use margin with Box
  • m is used for margin and p is used for padding.

Container|Layout

• Use of Container
  • Container manage the Layout like margin, padding,width,height etc.
• Import Container
  • import {Container} from ‘@material-ui/core’
• use Container
  • <Container maxWidth=”md” style={{background:’skyblue’}}>
    </Container >
• different size of Container
  • Bydefault maxWidth is lg(which is used for large screen)
  • md for medium screen
  • sx for mobile screen.
  • fixed is used for auto scalling, which can pic their size automatically.

Grid System For Responsive Layout

• what is grid
  • Grid is used to make responsive apps.
  • Just like Bootstrap, it uses 12 block in a grid, which can be adjusted according to screen size.
• why use grid
  • Use to make responsive app, which will look better in every screen size.
  • Where is a single row in a Grid.
• how to use material ui grid
  • Import Grid
    • import {Grid} from ‘$material-ui/core’
  • <Grid container>
    </Grid>
• 12 block
• what is xs, sm, MD, LG screen size
  • XS : Used from Mobile Screen Size
  • SM : Used for bid mobile or lablet.
  • MD : Used for small monitor
  • LS : Used for large Monitor

Hidden Layout

• what is hidden
  • hidden is a layout component in MUI.
• why use hidden
  • This control the height,width, length and other attributes.
  • Used to hide any layout for any specific device.
• how to use material ui hidden
  • import {Grid,Hidden} from ‘$material-ui/core’
  • <Grid container>
    </Grid>
  • Block 3 will be hide in screen size related to SM.
  • Ex2:
  • <Grid container>
    </Grid>

Tabs | Tab | Tab Panel

• Tabs is a collection where all tab will be show.
• Import Tabs, Tab, and AppBar
  • import {Tap,Taps,AppBar} from ‘$material-ui/core’
• Use Tabs and tab and get current tab value in the state
  • <AppBar>
    </AppBar>
• Make a TabPanel component and hide and show it with the current tab
• On click of Tab, value return to handleTabs is index of tab, using this index we can achive which tab need to show.
• https://www.youtube.com/watch?v=0kZxiDibsR4&list=PL8p2I9GklV4722H3_nosmpdjNXIPuBUXm&index=16

Menu With React Routing

• import menu
• apply menu with menu item
• install react-router dom and use it
• make 2 component and use them as router

    import React, { useState } from "react";
    import { Menu, MenuItem, Button } from "@mui/material";
    import { Link, Routes, Route, BrowserRouter as Router } from "react-router-dom";

    export default function Test8() {
      const [value, setValue] = useState(0);
      const openMenu = (e) => {
        setValue(true);
      };
      const closeMenu = (e) => {
        setValue(false);
      };
      return (
        <div>
          <h1>Test Menu</h1>
          <Router>
            <Button onClick={(e) => openMenu(e)}>Menu</Button>
            <Menu open={value} onClose={closeMenu}>
              <MenuItem>
                <Link to="/">Home</Link>
              </MenuItem>
              <MenuItem>
                <Link to="/about">About</Link>
              </MenuItem>
            </Menu>
            <Routes>
              <Route path="/" exact element={<Home />} />
              <Route path="/about" element={<About />} />
            </Routes>
          </Router>
        </div>
      );
    }
    function Home() {
      return (
        <>
          <h1>This is Home</h1>
        </>
      );
    }
    function About() {
      return (
        <>
          <h1>This is About</h1>
        </>
      );
    }