Lists

Lists present multiple line items vertically as a single continuous element. Lists are made up of a continuous column of rows. Each row contains a tile. Primary actions fill the tile, and supplemental actions are represented by icons and text. Lists are best suited for similar data types.

Folder List

To show this type of Lists you will need this code in down here.

     
 <List>
    <ListItem button>
        <Avatar>
            <i className="zmdi zmdi-folder zmdi-hc-fw zmdi-hc-lg text-white"/>
        </Avatar>
        <ListItemText primary="Photos" secondary="Jan 9, 2016" />
    </ListItem>

    <ListItem button>
        <Avatar>
            <i className="zmdi zmdi-file zmdi-hc-fw zmdi-hc-lg text-white"/>
        </Avatar>
        <ListItemText primary="Work" secondary="Jan 7, 2016" />
    </ListItem>

    <ListItem button>
        <Avatar>
            <i className="zmdi zmdi-account zmdi-hc-fw zmdi-hc-lg text-white"/>
        </Avatar>
        <ListItemText primary="Meetings" secondary="Jan 7, 2016" />
    </ListItem>
</List>
  

Checkbox List

     
 <List>
    {users.map(user =>
        <ListItem button key={user.email} onClick={event => this.handleToggle(event, user.id)}>
            <Avatar alt="Remy Sharp" src={user.image} />
            <ListItemText className="br-break" primary={user.email} secondary="Nov 8, 2017"/>
            <Badge className="mr-4 mt-2 text-uppercase" color="success" pill>Agent</Badge>
            <ListItemSecondaryAction>
                <Checkbox color="primary"
                          checked={this.state.checked.indexOf(user.id) !== -1}
                />
            </ListItemSecondaryAction>
        </ListItem>,
    )}
</List>
   

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
children	node		The content of the component.
classes	object		Useful to extend the style applied to components.
component	union: string |  func	'ul'	The component used for the root node. Either a string to use a DOM element or a component.
dense	bool	false	If true, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The property is available to descendant components as the dense context.
disablePadding	bool	false	If true, vertical padding will be removed from the list.
subheader	node		The content of the subheader, normally ListSubheader.