Material UI Components - Tuong-Nguyen/JavaScript-Structure GitHub Wiki

Install Material-ui:

To install and save in your package.json dependencies, run: npm install -S material-ui@next To use material-ui icons you need install material-ui-icon package: npm install -S material-ui-icons.

Material-ui components:

Button

The Button component support to creat a button with types: raised, flat, floating, icon, link...

  • Raised
    <Button raised color="primary">
      Primary
    </Button>
  • Flat
    <Button flat color="primary" >
      Flat Button
    </Button>
  • Floating
    <Button fab color="accent">
      <Add/>
    </Button>
  • Icon
    <IconButton>
      <AddAlert/>
    </IconButton>
  • Link
    <Button href="https://material-ui-1dab0.firebaseapp.com/component-demos/buttons#flat-buttons">
      Link
    </Button>

TextField:

Material-Ui provide 2 components to create an input text: TextField and Input

  • Normal textfield
<TextField id="txtID"/>
// TextField with label
<TextField id="txtID" label="ID" margin="normal"/>
// TextField with label and helper text
<TextField id="txtID" label="ID" margin="normal" helperText="The id will be used to login" />
//Disable TextField
<TextField id="txtID" disabled label="ID" margin="normal"/>
  • Password
<TextField id="txtPass" label="Pass" type="password" margin="normal"/>
  • Multiline
//`multiline` property is enable muntiline.
//with muntiline Textfield you can specify rows or maxrows to input.
   <TextField id="txtMultiline" label="Multiline" margin="normal" multiline defaultValue={`line1`+`\n`+`line2`}
     InputLabelProps={{
       shrink: true
     }}/>
  • Date
    <TextField id="txtDate" label="Date" margin="normal" type="date" defaultValue="01-01-2017"
      InputLabelProps={{
        shrink: true
      }}/>
  • Time
    <TextField id="txtTime" label="Time" margin="normal" type="time"
     InputLabelProps={{
       shrink: true
     }}/>
  • Input
    <Input
      placeholder="Placeholder"
      className={classes.input}
      inputProps={{
        'aria-label': 'Description',
    }}/>

Table:

Table component provide a table with children components as: TableHead, TableBody,TableRow,TableCell TableSortLabel is special component that will change the table title to button which support to data sort.

  • Normal table
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>
                Name
              </TableCell>
              <TableCell>
                Age
              </TableCell>
              <TableCell>
                Gender
              </TableCell>
              <TableCell>
                Select
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {columnData.map(item =>{
              return(
                <TableRow>
                  <TableCell>
                    {item.name}
                  </TableCell>
                  <TableCell>
                    {item.age}
                  </TableCell>
                  <TableCell>
                    {item.gender}
                  </TableCell>
                  <TableCell>
                    <Checkbox checked={isSelected}/>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
  • Select table

to set an select row used the selected prop and an selected item array to store list of selected items in the state object.

  onItemSelect(event, id){
    let selected = this.state.selected;
    let selectedIndex = selected.indexOf(id);
    if(selectedIndex == -1){
      selected.push(id);
      this.setState({
        selected: selected
      })
    }else if(selectedIndex >=0){
      selected.splice(selectedIndex, 1);
      this.setState({
        selected: selected
      })
    }
  }
  isSelected(id){
    if (this.state.selected.indexOf(id) >=0){
      return true;
    }
    return false;
  }
...
          <TableBody>
            {columnData.map(item =>{
              const isSelected = this.isSelected(item.id)
              return(
                <TableRow
                  hover
                  onClick={event => this.onItemSelect(event, item.id)}
                  key={item.id}
                  selected={isSelected}>
...
  • Sort table
---
   this.state = {
      IncreaseSort: true
    };
---
sortAge(){
    if(this.state.IncreaseSort){
      this.setState({IncreaseSort: false});
      return this.props.data.sort(function(a, b){
        return (a.age - b.age);
      });
    }else{
      this.setState({IncreaseSort: true});
      return this.props.data.sort(function(a, b){
        return (b.age - a.age);
      });
    }
  }
---
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>
                <TableSortLabel active={true} direction={this.state.direct} onClick={this.sortName}>
                  Name
                </TableSortLabel>
              </TableCell>
              <TableCell>
                <IconButton onClick={this.sortAge}>
                  {this.state.IncreaseSort == true?<TrendingDown/> : <TrendingUp/>}
                </IconButton>
                Age
              </TableCell>
              <TableCell>
                Gender
              </TableCell>
              <TableCell>
                Select
              </TableCell>
            </TableRow>
          </TableHead>
...

List

  • Simple list
        <List>
          <ListItem button onClick={this.menuItemClick}>
            <ListItemIcon>
              <Settings/>
            </ListItemIcon>
            <ListItemText primary="Admin" />
          </ListItem>
          <ListItem button onClick={this.menuItemClick}>
            <ListItemIcon>
              <NoteAdd/>
            </ListItemIcon>
            <ListItemText primary="Actions" />
          </ListItem>
       </List>
  • Divider

Divider will create an line that will devide the list items.

        <List>
          <ListItem button onClick={this.menuItemClick}>
            <ListItemIcon>
              <Settings/>
            </ListItemIcon>
            <ListItemText primary="Admin" />
          </ListItem>
          <Divider/>
          <ListItem button onClick={this.menuItemClick}>
            <ListItemIcon>
              <NoteAdd/>
            </ListItemIcon>
            <ListItemText primary="Actions" />
          </ListItem>
       </List>
  • Icon
          <ListItem button onClick={this.menuItemClick}>
            <ListItemIcon>
              <Settings/>
            </ListItemIcon>
            <ListItemText primary="Admin" />
          </ListItem>
  • Avata
          <ListItem button onClick={this.menuItemClick}>
            <Avatar alt="Gal Gadot" src={avata}>
            </Avatar>
            <ListItemText primary="Profile" />
          </ListItem>
  • Secondary action

use ListItemSecondaryAction to add an second acction in list item.

          <ListItem button onClick={this.menuItemClick}>
            <Avatar alt="Gal Gadot" src={avata}>
            </Avatar>
            <ListItemText primary="Profile" />
            <ListItemSecondaryAction>
              <IconButton><CommentIcon/></IconButton>
            </ListItemSecondaryAction>
          </ListItem>

Selection:

  • Checkbox
     <Checkbox value="1"/>
      <FormGroup>
        <FormControlLabel control={<Checkbox value="1"/>} label="CheckA"/>
        <FormControlLabel control={<Checkbox value="2"/>} label="CheckB" />
        <FormControlLabel control={<Checkbox value="3"/>} label="Disable" disabled/>
        <FormControlLabel control={<Checkbox value="4" style={{color: "#00FF00"}}/>} label="Green" />
      </FormGroup>
  • Radio
         <FormGroup row>
            <RadioGroup selectedValue={this.state.selected}
                        onChange={(event, value)=>{this.setState({selected: value});}}>
              <FormControlLabel value="Maile" control={<Radio/>} label="Male" />
              <FormControlLabel value="FeMaile" control={<Radio/>} label="FeMale"/>
              <FormControlLabel value="Oher" control={<Radio/>} label="FeMale"/>
              <FormControlLabel value="Disable" control={<Radio/>} label="Disable" disabled  />
            </RadioGroup>
          </FormGroup>
  • Switcher
      <FormGroup >
          <FormControlLabel control={<Switch checked="true"/>} label="A"/>
          <FormControlLabel control={<Switch/>} label="B"/>
          <FormControlLabel control={<Switch />} label="C" disabled/>
      </FormGroup>

Paper

      <Paper elevation={1} square>
        <Avatar alt="avata" src={img}></Avatar>
        <Typography type="headline" component="h3">
          Name
        </Typography>
        <Typography type="body1" component="p">
          Gal Gadot
        </Typography>
      </Paper>

Typography

        <Typography type="headline" component="h3">
          Name
        </Typography>
        <Typography type="body1" component="p">
          Gal Gadot
        </Typography>

Drawer

Drawer will define an navigation menu.

    <div>
      <IconButton onClick={this.menuCLick}>
        <Menu/>
      </IconButton>
      <Drawer
        anchor={this.props.anchor}
        open={this.state.open}
        onClick={this.menuCLick}
         >
        <MaterialList/>
      </Drawer>
    </div>);

Menu

      <div>
        <TextField label="name" value={arr[this.state.selectedIndex]}
                   aria-haspopup="true"
                   aria-controls="tasksMenu"
                   onClick={this.handleOpen}/>
        <Menu
          id="tasksMenu"
          anchorEl={this.state.anchorEl}
          open={this.state.open}
          onRequestClose={this.handleOpen}
        >
          {arr.map((item, index) => (
            <MenuItem key={item}
                      selected={index === this.state.selectedIndex}
                      onClick={event => this.handleMenuItemClick(event, index)}>
              {item}
            </MenuItem>
          ))}
        </Menu>
      </div>

Dialog

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.

      <div>
        <Button onClick={this.handleRequestOpen}>Open Dialog</Button>
        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
          <DialogTitle>
            {"Use Google's location service?"}
          </DialogTitle>
          <DialogContent>
            <DialogContentText>
              Let Google help apps determine location. This means sending anonymous location data to
              Google, even when no apps are running.
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleRequestClose} color="primary">
              Disagree
            </Button>
            <Button onClick={this.handleRequestClose} color="primary">
              Agree
            </Button>
          </DialogActions>
        </Dialog>
      </div>

Progress

Material-ui support 2 progress types: CircularProgress and LinearProgress.

      <CircularProgress color='accent' />
      <LinearProgress  />

###Badge

Badge generates a small badge to the top-right of its child(ren).

<CardContent> which store main content; <CardActions> where you can add action buttons. <CardMedia> which store media contents (images...)

      <Badge className={classes.badge} badgeContent={4} color="primary">
        <MailIcon />
      </Badge>
      <Badge className={classes.badge} badgeContent={10} color="accent">
        <NotificationIcon/>
      </Badge>

###Cards

Card component is a sheet of material that serves as an entry point to more detailed information. Card's childs:

<CardHeader>: in CarHeader you can set avata, title, subheader for the card header

       <Card className={classes.card}>
          <CardHeader
            avatar={
              <Avatar aria-label="Recipe" className={classes.avatar}>
                R
              </Avatar>
            }
            title="Nature"
            subheader="September 14, 2016"
          />
        <CardMedia>
          <img src={reptileImage} alt="Contemplative Reptile" />
        </CardMedia>
        <CardContent>
          <Typography type="headline" component="h2">
            Lizard
          </Typography>
          <Typography component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
        <CardActions>
          <Button dense color="primary">
            Share
          </Button>
          <Button dense color="primary">
            Learn More
          </Button>
        </CardActions>
       />

Chip

Chip component provide an space to store a small content. You can set avata, label(text content). And you can set an delete(close) chip event onRequestDelete

      <Chip
        avatar={<Avatar src={uxecoImage} />}
        label="Deletable Chip"
        onRequestDelete={handleRequestDelete}
        className={classes.chip}
      />
``
### 
* To see more about material-ui components api you can go to [here](https://material-ui-1dab0.firebaseapp.com/component-api/)
⚠️ **GitHub.com Fallback** ⚠️