@arterial/list

Another React Material List

Usage no npm install needed!

<script type="module">
  import arterialList from 'https://cdn.skypack.dev/@arterial/list';
</script>

README

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

Name Type Description
avatarList boolean Enables an avatar list variant.
children node Elements to be displayed within root element.
className string Classes to be applied to the root element.
dense boolean Enables a dense variant.
iconList boolean Enables an icon list variant.
imageList boolean Enables an image list variant.
nonInteractive boolean Enables a non-interactive variant.
textualList boolean Enables an textual list variant.
thumbnailList boolean Enables an thumbnail list variant.
twoLine boolean Enables a two-line variant.
videoList boolean Enables an video list variant.
tag string | object HTML tag to be applied to the root element. Defaults to ul.

ListItem

Name Type Description
activated boolean Indicates whether the element is activated.
children node Elements to be displayed within root element.
className string Classes to be applied to the root element.
disabled boolean Indicates whether the element is disabled.
selected boolean Indicates whether the element is selected.
tag string | object HTML tag to be applied to the root element. Defaults to li.

ListItemText

Name Type Description
children node Elements to be displayed within root element.
className string Classes to be applied to the root element.
tag string | object HTML tag to be applied to the root element. Defaults to span.

ListItemPrimaryText

Name Type Description
children node Elements to be displayed within root element.
className string Classes to be applied to the root element.
tag string | object HTML tag to be applied to the root element. Defaults to span.

ListItemSecondaryText

Name Type Description
children node Elements to be displayed within root element.
className string Classes to be applied to the root element.
tag string | object HTML tag to be applied to the root element. Defaults to span.

ListItemGraphic

Name Type Description
className string Classes to be applied to the root element.
graphic node Elements to be displayed within root element.
style object Styles to be applied to the root element.
tag string | object HTML tag to be applied to the root element. Defaults to span.

ListItemMeta

Name Type Description
className string Classes to be applied to the root element.
meta node Elements to be displayed within root element.
style object Styles to be applied to the root element.
tag string | object HTML tag to be applied to the root element. Defaults to span.

ListGroup

Name Type Description
className string Classes to be applied to the root element.
children node Elements to be displayed within root element.
tag string | object HTML tag to be applied to the root element. Defaults to div.

ListGroupSubheader

Name Type Description
className string Classes to be applied to the root element.
children node Elements to be displayed within root element.
tag string | object HTML tag to be applied to the root element. Defaults to h3.

ListDivider

Name Type Description
className string Classes to be applied to the root element.
children node Elements to be displayed within root element.
tag string | object HTML tag to be applied to the root element. Defaults to li.