material-ui.md

?

MuiThemeProvider

• Wrap main container's content with the MuiThemeProvider component.

import { MuiThemeProvider } from 'material-ui/styles';

1.Grid

• Creates visual consistency between layouts.

<Grid
  spacing={Number}
  container // for wrapping items properly if you want padding
  item // if you don't want padding
  direction="" // row, row-reverse, coluumn, column-reverse
  justify="" // center, space-between, space-evenly
  alignItems="" // flex-start, center,
/>

• GridList : For represent a collection fo items.

<GridList cellHeight={Number} spacing={Number}>
  {data.map((tile) => (
    <GridListTile>
      <img src="" />
      <GridListTileBar title={} subtitle={} actionIcon={} />
    </GridListTile>
  ))}
</GridList>

2.Button

<Button
  variant=""  //contained, text, outlined
  color="" // primary, secondary, inherit
  startIcon={<Icon_name/>}
  endIcon={<Icon_name/>}
/>
<IconButton color='' // inherint,primary,secondary
>
  <Icon_name/>
</IconButton>

3. Floating Action Button

• Typically as a circular shape with an icon in its center.

<Fab color=""
variant="" // extended,round
>

4.Select

<Select value={} onchange={} open={Boolean} close={Boolean} variant="">
  <option> </option>
  //OR
  <MenuItem></MenuItem>
</Select>

5.TextField

<TextField
  label="String"
  variant="" // filled,outlined
  error={Boolean}
>

6.Bottom Navigation

<BottomNavigation
 value={} // When you click this value take value of bottomNavigationAction
 onChange={} // you can send value by handleChange .
 >
  <BottomNaviagtionAction label="" value="" icon={<Icon_name/>}>
</BottomNvigation>

7.Menu

<Menu open={Boolean} onClose={Function}>
  <MenuItem onClick={Function}></MenuItem>
</Menu>

8.Tabs

const [value, setValue] = React.useState('one');

const handleChange = (event, newValue) => {
  setValue(newValue);
};

function TabPanel(props) {
  const { children, value, index, ...other } = props;

return (
  <Typography
    component="div"
    role="tabpanel"
    hidden={value !== index}
    {...other}
  >
    {value === index && <Box p={3}>{children}</Box>}
  </Typography>
 );
}
<AppBar>
  <Tabs
    value={}
    onChange={handlechange}
    orientation="" // horizontal, vertical
    indicatorColor="" // secondary,primary
    textColor="" // inherit, secondary,primary
  >
    <Tab label="" icon={<Icon_name/>} />
  </Tabs>
</AppBar>
<TabPanel value={} index="">
{children}
</TabPanel>

9.AppBar

<AppBar
  position="" // fixed, absolute, relative, static
  color="" // primary,inherit,secondary,transparent
>
  <Toolbar></Toolbar>
</AppBar>

10. Drawer

const list = () => (
  <div>
    <List>
      {data.map((text) => (
        <ListItemText primary="" />
      ))}
    </List>
  </div>
);
<Drawer
  anchor="" // left, right,bottom,top
  open={Boolean}
  onClose={Function}
>
  {list}
</Drawer>;

11. Card

<Card>
  <CardHeader
    avatar={}
    action={} // for icon
    title=""
    subheader=""
  />
  <CardMedia image="" title="" />
  <CardContent>{children}</CardContent>
  <CardActions>{children}</CardActions>
</CardContent>

12. Expansion Panel

<ExpansionPanel expanded={Boolean} onChange={Function}>
  <ExpansionPanelSummary ExpandIcon={<Icon_name />} id="">
    text
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>text</ExpansionPanelDetails>
</ExpansionPanel>

13. Progress

<CircularProgress size={Number} />
<LinearProgress />

14.Dialog

• In this first value of open is false. After the open dialog value of open is true and for closing the Dialog , through the onClose the value of open going to change to back false.

const [open, setOpen] = useState(false);
handleClose = () => {
  setOpen(false);
};
handleOpen = () => {
  setOpen(true);
};
<Button onClick={handleOpen}/> // and it's open the dialog with the value of open true.
 <Dialog open={open} onClose={handleClose}>
  <DialogTitle onClose={handleClose}>text</DialogTitle>
  <DialogContent>
    <DialogContentText>text</DialogContentText>
  </DialogContent>
  <List>
    {data.map((one) => (
      <ListItem>
        <ListItemText primay="one" />
      </ListItem>
    ))}
  </List>
</Dialog>

15. Avatar

<Avatar
  src="for img"
  variant="" // circle, rounded, square
>
  <Icon_name />
</Avatar>

16. Badge

<Badge
  badgeContent={Number}
  color=""
  variant="" // standard,dot
  invisible={Boolean}
>
  <Icon_name />
</Badge>

17. Divider

<Divider
  orientation="" // horizontal, vertical
  light={Boolean}
/>

18. Icons

npm install @material-ui/icons
import {icon} from '@material-ui/icons';

<Icon_name
  fontSize="" // default, small, large
/>

Lab

npm install @material-ui/lab

1. AutoComplete

<AutoComplete
  option={data}
  getOptionLabel={data.somethingLikeTitle}
  renderInput={(params) => <TextField {...params} varinat="" outlined />}
  freeSole={Boolean} // true, so user input is not bound to provided options.
/>

2. Rating

const [value, setValue] = useState(Number);
<Rating
  value={value}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  emptyIcon={<Icon_name />}
/>;