@arterial/list v3.0.0

Arterial List

Another React Material List

Installation

npm install @arterial/list

Usage

Styles

Sass

@use "@material/list/index.scss" as list;
@include list.core-styles;

CSS

import '@material/list/dist/mdc.list.css';

JSX

import { List, ListItem, ListItemText, ... } from '@arterial/list';

Single-line List

Single-line list items contain a maximum of one line of text.

<List>
  <ListItem>
    <ListItemText>Single-line item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>Single-line item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>Single-line item</ListItemText>
  </ListItem>
</List>

Two-line List

Two-line list items contain a maximum of two lines of text.

<List twoLine>
  <ListItem>
    <ListItemText>
      <ListItemPrimaryText>Two-line item</ListItemPrimaryText>
      <ListItemSecondaryText>Secondary text</ListItemSecondaryText>
    </ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>
      <ListItemPrimaryText>Two-line item</ListItemPrimaryText>
      <ListItemSecondaryText>Secondary text</ListItemSecondaryText>
    </ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>
      <ListItemPrimaryText>Two-line item</ListItemPrimaryText>
      <ListItemSecondaryText>Secondary text</ListItemSecondaryText
    </ListItemText>
  </ListItem>
</List>

Other Variants

Dense

<List dense>
  <ListItem>
    <ListItemText>Dense item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>Dense item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>Dense item</ListItemText>
  </ListItem>
</List>

Non-interactive

<List nonInteractive>
  <ListItem>
    <ListItemText>Non-interactive item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>Non-interactive item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemText>Non-interactive item</ListItemText>
  </ListItem>
</List>

Icon

<List iconList>
  <ListItem>
    <ListItemGraphic graphic="wifi" />
    <ListItemText>Icon item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic="wifi" />
    <ListItemText>Icon item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic="wifi" />
    <ListItemText>Avatar item</ListItemText>
  </ListItem>
</List>

Avatar

import Avatar from 'avatar.png';

<List avatarList>
  <ListItem>
    <ListItemGraphic graphic={<img src={Avatar} alt="avatar" />} />
    <ListItemText>Avatar item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Avatar} alt="avatar" />} />
    <ListItemText>Avatar item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Avatar} alt="avatar" />} />
    <ListItemText>Avatar item</ListItemText>
  </ListItem>
</List>;

Thumbnail

import Thumb from 'thumb.png';

<List thumbnailList>
  <ListItem>
    <ListItemGraphic graphic={<img src={Thumb} alt="thumb" />} />
    <ListItemText>Thumbnail item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Thumb} alt="thumb" />} />
    <ListItemText>Thumbnail item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Thumb} alt="thumb" />} />
    <ListItemText>Thumbnail item</ListItemText>
  </ListItem>
</List>;

Image

import Image from 'image.png';

<List imageList>
  <ListItem>
    <ListItemGraphic graphic={<img src={Image} alt="image" />} />
    <ListItemText>Image item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Image} alt="image" />} />
    <ListItemText>Image item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Image} alt="image" />} />
    <ListItemText>Image item</ListItemText>
  </ListItem>
</List>;

Video

import Video from 'video.png';

<List videoList>
  <ListItem>
    <ListItemGraphic graphic={<img src={Video} alt="video" />} />
    <ListItemText>Video item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Thumb} alt="video" />} />
    <ListItemText>Video item</ListItemText>
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic={<img src={Thumb} alt="video" />} />
    <ListItemText>Video item</ListItemText>
  </ListItem>
</List>;

Activated

const ITEMS = ['inbox', 'star', 'send', 'drafts'];
function capitalize(value) {
  return value.charAt(0).toUpperCase() + value.substring(1);
}
function Activated() {
  const [activated, setActivated] = useState('star');
  return (
    <List>
      {ITEMS.map(item => (
        <ListItem
          activated={activated === item}
          id={item}
          key={item}
          onClick={() => setActivated(item)}
        >
          {capitalize(item)}
        </ListItem>
      ))}
    </List>
  );
}

Selected

const ITEMS = ['inbox', 'star', 'send', 'drafts'];
function capitalize(value) {
  return value.charAt(0).toUpperCase() + value.substring(1);
}
function Selected() {
  const [selected, setSelected] = useState('star');
  return (
    <List>
      {ITEMS.map(item => (
        <ListItem
          id={item}
          key={item}
          onClick={() => setSelected(item)}
          selected={selected === item}
        >
          {capitalize(item)}
        </ListItem>
      ))}
    </List>
  );
}

Graphic

import {Checkbox} from '@arterial/checkbox';
import {Radio} from '@arterial/radio';

<List tag="div">
  <ListItem tag="div">
    <ListItemGraphic graphic="wifi" />
    <ListItemText>Graphic as icon</ListItemText>
  </ListItem>
  <ListItem tag="label">
    <ListItemGraphic
      graphic={<Checkbox id="graphic-check" onChange={() => {}} />}
    />
    <ListItemText>Graphic with checkbox</ListItemText>
  </ListItem>
  <ListItem tag="label">
    <ListItemGraphic
      graphic={<Radio id="graphic-radio" onChange={() => {}} />}
    />
    <ListItemText>Graphic with radio</ListItemText>
  </ListItem>
</List>;

Metadata

import {Checkbox} from '@arterial/checkbox';
import {Radio} from '@arterial/radio';

<List tag="div">
  <ListItem tag="div">
    <ListItemText>Meta as text</ListItemText>
    <ListItemMeta meta="info" />
  </ListItem>
  <ListItem tag="div">
    <ListItemText>Meta with icon component</ListItemText>
    <ListItemMeta meta={<Icon icon="info" />} />
  </ListItem>
  <ListItem tag="div">
    <ListItemText>Meta with two icon components</ListItemText>
    <ListItemMeta
      meta={
        <>
          <Icon icon="info" />
          <Icon icon="info" />
        </>
      }
    />
  </ListItem>
  <ListItem tag="div">
    <ListItemText>Meta with icon button</ListItemText>
    <ListItemMeta
      meta={<IconButton icon="more_vert" style={{marginRight: '-12px'}} />}
    />
  </ListItem>
  <ListItem tag="label">
    <ListItemText>Meta with checkbox</ListItemText>
    <ListItemMeta
      meta={
        <Checkbox
          id="meta-checkbox"
          onChange={() => {}}
          style={{marginRight: '-8px'}}
        />
      }
    />
  </ListItem>
  <ListItem tag="label">
    <ListItemText>Meta with radio</ListItemText>
    <ListItemMeta
      meta={<Radio id="meta-radio" onChange={() => {}} />}
      style={{marginRight: '-8px'}}
    />
  </ListItem>
</List>;

Graphic and Metadata

<List twoLine>
  <ListItem>
    <ListItemGraphic graphic="folder" />
    <ListItemText>
      <ListItemPrimaryText>Two-line item</ListItemPrimaryText>
      <ListItemSecondaryText>Secondary text</ListItemSecondaryText>
    </ListItemText>
    <ListItemMeta meta="info" />
  </ListItem>
  <ListItem>
    <ListItemGraphic graphic="folder" />
    <ListItemText>
      <ListItemPrimaryText>Two-line item</ListItemPrimaryText>
      <ListItemSecondaryText>Secondary text</ListItemSecondaryText>
    </ListItemText>
    <ListItemMeta meta="info" />
  </ListItem>
  <ListDivider />
  <ListItem>
    <ListItemGraphic graphic="folder" />
    <ListItemText>
      <ListItemPrimaryText>Two-line item</ListItemPrimaryText>
      <ListItemSecondaryText>Secondary text</ListItemSecondaryText>
    </ListItemText>
    <ListItemMeta meta="info" />
  </ListItem>
</List>

Grouped

<ListGroup>
  <ListGroupSubheader>List 1</ListGroupSubheader>
  <List>
    <ListItem>
      <ListItemText>Line item</ListItemText>
    </ListItem>
    <ListItem>
      <ListItemText>Line item</ListItemText>
    </ListItem>
    <ListItem>
      <ListItemText>Line item</ListItemText>
    </ListItem>
  </List>
  <ListGroupSubheader>List 2</ListGroupSubheader>
  <List>
    <ListItem>
      <ListItemText>Line item</ListItemText>
    </ListItem>
    <ListItem>
      <ListItemText>Line item</ListItemText>
    </ListItem>
    <ListItem>
      <ListItemText>Line item</ListItemText>
    </ListItem>
  </List>
</ListGroup>

Props

List

ListItem

ListItemText

ListItemPrimaryText

ListItemSecondaryText

ListItemGraphic

ListItemMeta

ListGroup

ListGroupSubheader

ListDivider