STYLED MDL

Lists

Customizable scrollable lists.

Simple List

  • Bryan Cranston
  • Aaron Paul
  • Bob Odenkirk
/*--- Simple list ---*/
<List>
  <ListItem>Bryan Cranston</ListItem>
  <ListItem>Aaron Paul</ListItem>
  <ListItem>Bob Odenkirk</ListItem>
</List>

List with icons

  • personBryan Cranston
  • personAaron Paul
  • personBob Odenkirk
/*--- Icons ---*/
<List>
  <ListItem>
    <LiIcon><Icon name="person" /></LiIcon>
    Bryan Cranston
  </ListItem>
  <ListItem>
    <LiIcon><Icon name="person" /></LiIcon>
    Aaron Paul
  </ListItem>
  <ListItem>
    <LiIcon><Icon name="person" /></LiIcon>
    Bob Odenkirk
  </ListItem>
</List>

List with Avatars and Actions

  • Bryan Cranston
  • Aaron Paul
  • Bob Odenkirk
/*--- Avatars and controls ---*/
<List>
  <ListItem>
    <LiPrimary>
      <LiAvatar src="http://bit.ly/2piVFMa" />
      Bryan Cranston
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem>
    <LiPrimary>
      <LiAvatar src="http://bit.ly/2qldLvM" />
      Aaron Paul
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem>
    <LiPrimary>
      <LiAvatar src="http://bit.ly/2qsbwpq" />
      Bob Odenkirk
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
</List>

List with Avatars and Controls

  • personBryan Cranston
  • personAaron Paul
  • personBob Odenkirk
/*--- Avatars and controls ---*/
<List>
  <ListItem>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Bryan Cranston
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Checkbox defaultChecked />
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Aaron Paul
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Radio />
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Bob Odenkirk
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Switch defaultChecked />
      </LiAction>
    </LiSecondary>
  </ListItem>
</List>

Two Line List

  • personBryan Cranston62 EpisodesActor
  • personAaron Paul62 Episodes
  • personBob Odenkirk62 Episodes
/*--- Two line ---*/
<List>
  <ListItem twoLine>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Bryan Cranston
      <LiSubTitle>62 Episodes</LiSubTitle>
    </LiPrimary>
    <LiSecondary>
      <LiInfo>Actor</LiInfo>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem twoLine>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Aaron Paul
      <LiSubTitle>62 Episodes</LiSubTitle>
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem twoLine>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Bob Odenkirk
      <LiSubTitle>62 Episodes</LiSubTitle>
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
</List>

Three Line List

  • personBryan Cranston
    Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.
  • personAaron Paul
    Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie.
  • personBob Odenkirk
    Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul".
/*--- Three line ---*/
<List>
  <ListItem threeLine>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Bryan Cranston
      <LiTextBody>
        Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.
      </LiTextBody>
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem threeLine>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Aaron Paul
      <LiTextBody>
        Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie.
      </LiTextBody>
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
  <ListItem threeLine>
    <LiPrimary>
      <LiAvatar><Icon name="person" /></LiAvatar>
      Bob Odenkirk
      <LiTextBody>
        Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul".
      </LiTextBody>
    </LiPrimary>
    <LiSecondary>
      <LiAction>
        <Button icon accent><Icon name="star" /></Button>
      </LiAction>
    </LiSecondary>
  </ListItem>
</List>

Usage

The List component and its supporting child components only have a few configurable props. Create custom lists by extending their styles and composing the provided components in different ways.

<List>

PropTypeDefaultDescription
widthstringundefinedSets the width of the list as a css value (e.g. 300px)

<ListItem>

PropTypeDefaultDescription
twoLinebooleanfalseEnable this for list items with 2 lines of content. See the Material Design Link Spec for details
threeLinebooleanfalseEnable this for list items with 3 lines of content. See the Material Design Link Spec for details

<LiAction>

No Custom Props

<LiIcon>

No Custom Props

<LiAvatar>

PropTypeDefaultDescription
srcstringundefinedShould be a url to an image. If set, it will fill the avatar with this image

<LiInfo>

No Custom Props

<LiPrimary>

No Custom Props

<LiSecondary>

No Custom Props

<LiSubTitle>

No Custom Props

<LiTextBody>

No Custom Props

<LiTitle>

No Custom Props