List

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.

Import Syntax

xxxxxxxxxx
 
import List, {
  ListItem,
  ListHeader,
  ListItemTitle,
  ListItemSubtitle
} from 'calcite-react/List';

Basic Usage

 
<List style={{ maxWidth: '280px' }}>
  <ListHeader>Nested List Items</ListHeader>
  <ListItem leftNode={<SendIcon />}>
    <ListItemTitle>Sent mail</ListItemTitle>
  </ListItem>
  <ListItem leftNode={<EmailOpenIcon />}>
    <ListItemTitle>Drafts</ListItemTitle>
    <ListItemSubtitle>You have no drafts</ListItemSubtitle>
  </ListItem>
  <ListItem
    leftNode={<InboxIcon />}
    rightNode={<AngleUpIcon style={{ width: '24px', height: '24px' }} />}
  >
    <ListItemTitle>Inbox</ListItemTitle>
    <ListItemSubtitle>3 Items</ListItemSubtitle>
  </ListItem>
  <List nested>
    <ListItem leftNode={<EmailIcon />} rightNode={1}>
      <ListItemTitle>Unread</ListItemTitle>
    </ListItem>
    <ListItem leftNode={<StarIcon />} rightNode={9}>
      <ListItemTitle>Starred</ListItemTitle>
    </ListItem>
    <ListItem leftNode={<CommentAlertIcon />} rightNode="0">
      <ListItemTitle>Urgent</ListItemTitle>
    </ListItem>
  </List>
</List>

Controlled List

 
() => {
  class ListExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        open: false,
      }
      this.toggleSublist = this.toggleSublist.bind(this)
    }
​
    toggleSublist() {
      this.setState({
        open: !this.state.open,
      })
    }
​
    render() {
      let arrowIcon
      if (this.state.open) {
        arrowIcon = <AngleUpIcon style={{ width: '24px', height: '24px' }} />
      } else {
        arrowIcon = (
          <AngleDownIcon style={{ width: '24px', height: '24px' }} />
        )
      }
​
      return (
        <List style={{ maxWidth: '280px' }}>
          <ListHeader>Nested List Items</ListHeader>
          <ListItem leftNode={<SendIcon />}>
            <ListItemTitle>Sent mail</ListItemTitle>
          </ListItem>
          <ListItem leftNode={<EmailOpenIcon />}>
            <ListItemTitle>Drafts</ListItemTitle>
            <ListItemSubtitle>You have no drafts</ListItemSubtitle>
          </ListItem>
          <ListItem
            leftNode={<InboxIcon />}
            rightNode={arrowIcon}
            onClick={this.toggleSublist}
          >
            <ListItemTitle>Inbox</ListItemTitle>
            <ListItemSubtitle>3 Items</ListItemSubtitle>
          </ListItem>
          <List nested open={this.state.open}>
            <ListItem leftNode={<EmailIcon />} rightNode={1}>
              <ListItemTitle>Unread</ListItemTitle>
            </ListItem>
            <ListItem leftNode={<StarIcon />} rightNode={9}>
              <ListItemTitle>Starred</ListItemTitle>
            </ListItem>
            <ListItem leftNode={<CommentAlertIcon />} rightNode="0">
              <ListItemTitle>Urgent</ListItemTitle>
            </ListItem>
          </List>
        </List>
      )
    }
  }
​
  return <ListExample />
}

Minimal List

 
<List minimal style={{ maxWidth: '280px' }}>
  <ListHeader>Filters</ListHeader>
  <ListItem leftNode={<ChevronRightIcon size={16} />}>
    <ListItemTitle>Item Type</ListItemTitle>
  </ListItem>
  <ListItem leftNode={<ChevronRightIcon size={16} />}>
    <ListItemTitle>Date Modified</ListItemTitle>
  </ListItem>
  <List minimal nested open={false}>
    <ListItem>
      <ListItemTitle>Today</ListItemTitle>
    </ListItem>
    <ListItem active>
      <ListItemTitle>Yesterday</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>Last 7 Days</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>Last 30 Days</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>Custom Range...</ListItemTitle>
    </ListItem>
  </List>
  <ListItem
    leftNode={<ChevronDownIcon size={16} />}
    rightNode={<CalciteA>Clear</CalciteA>}
  >
    <ListItemTitle>Date Created</ListItemTitle>
  </ListItem>
  <List minimal nested open>
    <ListItem>
      <ListItemTitle>Today</ListItemTitle>
    </ListItem>
    <ListItem active>
      <ListItemTitle>Yesterday</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>Last 7 Days</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>Last 30 Days</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>Custom Range...</ListItemTitle>
    </ListItem>
  </List>
</List>

Minimal MultiSelect List

 
<List minimal style={{ maxWidth: '280px' }}>
  <ListHeader>Filters</ListHeader>
  <ListItem leftNode={<ChevronRightIcon size={16} />}>
    <ListItemTitle>Item Type</ListItemTitle>
  </ListItem>
  <ListItem leftNode={<ChevronRightIcon size={16} />}>
    <ListItemTitle>Date Modified</ListItemTitle>
  </ListItem>
  <ListItem
    leftNode={<ChevronDownIcon size={16} />}
    rightNode={<CalciteA>Clear</CalciteA>}
    open
  >
    <ListItemTitle>Tags</ListItemTitle>
  </ListItem>
  <List minimal multiSelect nested>
    <ListItem filterItem>
      <Search fullWidth placeholder="Filter tags" />
    </ListItem>
    <ListItem active>
      <ListItemTitle>basemap</ListItemTitle>
    </ListItem>
    <ListItem active>
      <ListItemTitle>beta</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>esri_basemap</ListItemTitle>
    </ListItem>
    <ListItem active>
      <ListItemTitle>style</ListItemTitle>
    </ListItem>
    <ListItem>
      <ListItemTitle>vector</ListItemTitle>
    </ListItem>
  </List>
</List>

Selectable List

 
<List selectable style={{ maxWidth: '280px' }}>
  <ListHeader>Folders</ListHeader>
  <ListItem filterItem>
    <Search fullWidth placeholder="Filter folders" />
  </ListItem>
  <ListItem active leftNode={<FolderOpenIcon size={16} />}>
    <ListItemTitle>All My Content</ListItemTitle>
  </ListItem>
  <ListItem leftNode={<HomeIcon size={16} />}>
    <ListItemTitle>james_t_kirk</ListItemTitle>
  </ListItem>
  <ListItem leftNode={<FolderIcon size={16} />}>
    <ListItemTitle>M Class Planets</ListItemTitle>
  </ListItem>
</List>

Lots of Content

Amazon

S3, IoT, Glacier, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Azure

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.

Cisco

 
<List>
  <ListItem leftNode={<AmazonIcon />}>
    <ListItemTitle>Amazon</ListItemTitle>
    <ListItemSubtitle>
      S3, IoT, Glacier, Lorem ipsum dolor sit amet, consectetur adipisicing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut.
    </ListItemSubtitle>
  </ListItem>
  <ListItem leftNode={<AzureIcon />}>
    <ListItemTitle>Azure</ListItemTitle>
    <ListItemSubtitle>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
    </ListItemSubtitle>
  </ListItem>
  <List nested>
    <ListItem leftNode={<ViewGridIcon />}>
      <ListItemTitle>Azure Blob storage</ListItemTitle>
      <ListItemSubtitle>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore.
      </ListItemSubtitle>
    </ListItem>
    <ListItem leftNode={<LanConnectIcon />}>
      <ListItemTitle>Azure IoT</ListItemTitle>
      <ListItemSubtitle>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore.
      </ListItemSubtitle>
    </ListItem>
    <ListItem leftNode={<VectorPolylineIcon />}>
      <ListItemTitle>Azure Event hubs</ListItemTitle>
      <ListItemSubtitle>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore.
      </ListItemSubtitle>
    </ListItem>
  </List>
  <ListItem leftNode={<CiscoWebexIcon />}>
    <ListItemTitle>Cisco</ListItemTitle>
    <ListItemSubtitle>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
    </ListItemSubtitle>
  </ListItem>
</List>

Props

List `default`

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component; can contain ListHeader, ListItem, and even another List.
nested	Bool	false	-	Applied when the List is imbedded inside another List.
open	Bool	false	-	Whether the List should be collapsed or expanded.
minimal	Bool	false	-	Minimal styling for the List
multiSelect	Bool	false	-	Display check marks for selected ListItems, used with the `minimal` and `nested` properties
selectable	Bool	false	-	Selectable styling for the List

ListHeader

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component.

ListItem

Property	Type	Required	Default	Description
children	Node	false	-	Content of the ListItem.
leftNode	Node	false	-	Content placed to the left of the ListItem.
rightNode	Node	false	-	Content placed to the right of the ListItem.
active	Bool	false	-	Toggle the active style of a ListItem
filterItem	Bool	false	-	Add some styles to display a Search element properly inside a ListItem
disabled	Bool	false	-	Toggle the disabled state of the ListItem, results in the item being unselectable and slightly lower opacity

ListItemTitle

Property	Type	Required	Default	Description
children	Node	false	-	Content of the ItemTitle.
nested	Bool	false	-	Applied when the List is imbedded inside another List.

ListItemSubtitle

Property	Type	Required	Default	Description
children	Node	false	-	Content of the Subtitle.
nested	Bool	false	-	Applied when the List is imbedded inside another List.

Calcite React