List

Lists are continuous, vertical indexes of text or images. - Material Docs

import { List } from 'material-bread';

List components are built using ListItem s, and ListSection s, and ListExpand . There are many combinations of these components, please see each components page or storybook for more demos.



Attractions



Dining



Education



Health



Family



Office



Promotions

Live Editing

class ListPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <List style={{ maxWidth: 300 }}>
        <ListItem
          text={'Attractions'}
          icon={<Icon name={'local-movies'} size={24} />}
        />
        <ListItem
          text={'Dining'}
          icon={<Icon name={'local-dining'} size={24} />}
        />
        <ListItem text={'Education'} icon={<Icon name={'edit'} size={24} />} />
        <ListItem text={'Health'} icon={<Icon name={'favorite'} size={24} />} />
        <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />
        <ListItem
          text={'Office'}
          icon={<Icon name={'content-cut'} size={24} />}
        />
        <ListItem
          text={'Promotions'}
          icon={<Icon name={'loyalty'} size={24} />}
        />
      </List>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { List, ListItem } from 'material-bread';

class ListPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <List style={{ width: 300 }}>
        <ListItem text={'Attractions'} />
        <ListItem text={'Dining'} />
        <ListItem text={'Education'} />
        <ListItem text={'Health'} />
        <ListItem text={'Family'} />
        <ListItem text={'Office'} />
        <ListItem text={'Promotions'} />
      </List>
    );
  }
}

Name

Description

Type

Default

shadow

Shadow using the Shadow util

number

style

Styles root element

object

subheader

Adds a subheader for the whole list

string

You can see even more examples in the Storybook environment.

Favorites



Janet Perkins



Mary Perkins



Peter Carlsson



Trevor Hansen

Live Editing

class DialogPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
        <List subheader={'Favorites'} style={{ maxWidth: 300 }}>
            <ListItem
                text={'Janet Perkins'}
                media={
                    <Avatar
                        type="icon"
                        content="person"
                        contentColor={'#ececec'}
                        color={'#a3a3a3'}
                        size={40}
                    />
                }
            />
            <ListItem
                text={'Mary Perkins'}
                media={
                    <Avatar
                        type="icon"
                        content="person"
                        contentColor={'#ececec'}
                        color={'#a3a3a3'}
                        size={40}
                    />
                }
            />
            <ListItem
                text={'Peter Carlsson'}
                media={
                    <Avatar
                        type="icon"
                        content="person"
                        contentColor={'#ececec'}
                        color={'#a3a3a3'}
                        size={40}
                    />
                }
            />
            <ListItem
                text={'Trevor Hansen'}
                media={
                    <Avatar
                        type="icon"
                        content="person"
                        contentColor={'#ececec'}
                        color={'#a3a3a3'}
                        size={40}
                    />
                }
            />
        </List>
    );
  }
}

List

Component #

Usage #

Props #

Demos #

Subheader #