Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets Sliders Snackbars Switches Tables Tabs Text fields Time pickers Tooltips Utilities home apps Buttons palette Two
Materially
github-circle-black-transparent

Lists

Lists are continuous, vertical indexes of text or images
Material Design Guidelines: Lists

Example

avatar
Headline
Supporting text
trailing
 avatar
overline
Headline
Supporting text
edit delete
Multiline
Line one
Line two
States
 home
Headline
trailing
settings 
<mc-list>
  <mc-list-item>
    <mc-avatar slot="start">
      <img alt="avatar" src="./woman.jpg">
    </mc-avatar>

    <div slot="headline">Headline</div>
    <div slot="supporting-text">Supporting text</div>

    <div slot="trailing-supporting-text">trailing</div>
  </mc-list-item>

  <mc-list-item>
    <mc-avatar slot="start">
      <img alt="avatar" src="./woman.jpg">
    </mc-avatar>

    <div slot="overline">overline</div>
    <div slot="headline">Headline</div>
    <div slot="supporting-text">Supporting text</div>

    <mc-icon slot="end">edit</mc-icon>
    <mc-icon slot="end">delete</mc-icon>
  </mc-list-item>

  <mc-list-item multiline>
    <div slot="headline">Multiline</div>
    <div slot="supporting-text">
      <div>Line one</div>
      <div>Line two</div>
    </div>

    <mc-checkbox slot="end"></mc-checkbox>
  </mc-list-item>

  <mc-list-item states>
    <div slot="headline">States</div>
    <mc-checkbox slot="end"></mc-checkbox>
  </mc-list-item>

  <mc-divider></mc-divider>

  <mc-list-item>
    <mc-icon slot="start">home</mc-icon>
    <div slot="headline">Headline</div>
    <div slot="trailing-supporting-text">trailing</div>
    <mc-icon slot="end">settings</mc-icon>
  </mc-list-item>
</mc-list>

List item variations

inbox
Single line
 inbox
Line one
Line two
 inbox
Line one
Line two
Line three
 
<mc-list>
  <mc-list-item>
    <mc-icon slot="start">inbox</mc-icon>
    <div slot="headline">Single line</div>
  </mc-list-item>

  <mc-list-item multiline>
    <mc-icon slot="start">inbox</mc-icon>
    <div slot="headline">Line one</div>
    <div slot="supporting-text">Line two</div>
  </mc-list-item>

  <mc-list-item multiline>
    <mc-icon slot="start">inbox</mc-icon>
    <div slot="headline">Line one</div>
    <div slot="supporting-text">
      <div>Line two</div>
      <div>Line three</div>
    </div>
  </mc-list-item>
</mc-list>

Start, end, trailing, overline

avatar
Avatar
 inbox
Icons
edit inbox
Icon buttons
Hover to show more buttons
delete edit inbox
Overline
Headline
trailing
 
<mc-list>
  <mc-list-item>
    <mc-avatar slot="start">
      <img alt="avatar" src="./woman.jpg">
    </mc-avatar>
    <div slot="headline">Avatar</div>
  </mc-list-item>

  <mc-list-item>
    <mc-icon slot="start">inbox</mc-icon>
    <div slot="headline">Icons</div>
    <mc-icon slot="end">edit</mc-icon>
  </mc-list-item>

  <mc-list-item>
    <mc-icon slot="start">inbox</mc-icon>
    <div slot="headline">Icon buttons</div>
    <div slot="supporting-text">Hover to show more buttons</div>
    <mc-icon-button slot="end" hover-only>
      <mc-icon>delete</mc-icon>
    </mc-icon-button>
    <mc-icon-button slot="end">
      <mc-icon>edit</mc-icon>
    </mc-icon-button>
  </mc-list-item>

  <mc-list-item>
    <mc-icon slot="start">inbox</mc-icon>
    <div slot="overline">Overline</div>
    <div slot="headline">Headline</div>
    <div slot="trailing-supporting-text">trailing</div>
  </mc-list-item>
</mc-list>

Selection Exit selection mode

avatar
Avatar select
 avatar
Headline
 avatar
Headline
 avatar
Headline
 avatar
Headline
 
<mc-list id="selection-list">
  <mc-list-item selected value="1">
    <mc-avatar slot="start" select>
      <img alt="avatar" src="./woman.jpg">
    </mc-avatar>
    <div slot="headline">Headline</div>
    <mc-checkbox slot="end"></mc-checkbox>
  </mc-list-item>

  <mc-list-item selected value="2">
    <mc-avatar slot="start">
      <img alt="avatar" src="./woman.jpg">
    </mc-avatar>
    <div slot="headline">Headline</div>
    <mc-checkbox slot="end"></mc-checkbox>
  </mc-list-item>

  <mc-list-item value="3">
    <mc-avatar slot="start">
      <img alt="avatar" src="./woman.jpg">
    </mc-avatar>
    <div slot="headline">Headline</div>
    <mc-switch slot="end"></mc-switch>
  </mc-list-item>

  <mc-list-item value="4">
    <mc-avatar slot="start">
      <img alt="avatar" src="./woman.jpg">
    </mc-avatar>
    <div slot="headline">Headline</div>
    <mc-switch slot="end"></mc-switch>
  </mc-list-item>
</mc-list>
            
document.querySelector('#selection-list').addEventListener('change', event => {
  console.log(event.target.value); // "1,2"
  console.log(event.target.values); // ['1', '2']
});

// Exit selection mode manually.
//   If all items are deselected then selection mode is exited automatically
document.querySelector('#selection-list').exitSelectionMode();

// Selection mode events
document.querySelector('#selection-list').addEventListener('enter-selection-mode', () => {});
document.querySelector('#selection-list').addEventListener('exit-selection-mode', () => {});

Swipe actions (mobile only)

delete
Headline
Supporting text
edit delete
Headline
Supporting text
edit delete
Headline
Supporting text
edit 
<mc-list id="swipe-list">
  <mc-list-item>
    <mc-icon slot="swipe-start">delete</mc-icon>
    <div slot="headline">Headline</div>
    <div slot="supporting-text">Supporting text</div>
    <mc-icon slot="swipe-end">delete</mc-icon>
  </mc-list-item>

  <mc-list-item>
    <mc-icon slot="swipe-start">delete</mc-icon>
    <div slot="headline">Headline</div>
    <div slot="supporting-text">Supporting text</div>
    <mc-icon slot="swipe-end">delete</mc-icon>
  </mc-list-item>

  <mc-list-item>
    <mc-icon slot="swipe-start">delete</mc-icon>
    <div slot="headline">Headline</div>
    <div slot="supporting-text">Supporting text</div>
    <mc-icon slot="swipe-end">delete</mc-icon>
  </mc-list-item>
</mc-list>
            
document.querySelector('#swipe-actions').addEventListener('swipeactionstart', event => {
  event.target.remove();
});

document.querySelector('#swipe-actions').addEventListener('swipeactionend', event => {
  console.log('end', event.target);
});

Reorder list items

Reordering has two options shifting all elements (default). Or you can enable swap.
One
Click and hold to drag
drag_handle
Two
Click and hold to drag
drag_handle
Three
Click and hold to drag
drag_handle
Four
Click and hold to drag
drag_handle 
<mc-list reorder>
  <mc-list-item>
    <div slot="headline">One</div>
    <div slot="supporting-text">Click and hold to drag</div>
    <mc-icon slot="end">drag_handle</mc-icon>
    <mc-divider inset></mc-divider>
  </mc-list-item>

  <mc-list-item>
    <div slot="headline">Two</div>
    <div slot="supporting-text">Click and hold to drag</div>
    <mc-icon slot="end">drag_handle</mc-icon>
    <mc-divider inset></mc-divider>
  </mc-list-item>

  <mc-list-item>
    <div slot="headline">Three</div>
    <div slot="supporting-text">Click and hold to drag</div>
    <mc-icon slot="end">drag_handle</mc-icon>
    <mc-divider inset></mc-divider>
  </mc-list-item>

  <mc-list-item>
    <div slot="headline">Four</div>
    <div slot="supporting-text">Click and hold to drag</div>
    <mc-icon slot="end">drag_handle</mc-icon>
    <mc-divider inset></mc-divider>
  </mc-list-item>
</mc-list>


<!-- Swap -->
<mc-list reorder swap>
  <mc-list-item>
  </mc-list-item>

  <mc-list-item>
  </mc-list-item>

  <mc-list-item>
  </mc-list-item>

  <mc-list-item>
  </mc-list-item>
</mc-list>
            
// Listen for reorder event
const list = document.querySelector('#list-reorder');
list.addEventListener('reorder', () => {
  // list elements are in new order
  console.log(list.children);
});

Virtual repeat

Virtual repeat lists provide a performant way to handle large lists
0
1
2
3
4
5
6
7
8
9
 
<!-- Full page virtual repeat -->
<mc-list id="virtual-list"></mc-list>

<!-- Scroll container virtual repeat -->
<div style="max-height: 300px; overflow-y: scroll;">
  <mc-list id="virtual"></mc-list>
</div>
            
import { Component, html } from '@thewebformula/lithe';
import htmlTemplate from './page.html';

class extends Component {
  static title = 'Lists';
  static htmlTemplate = htmlTemplate;

  listItems = [...new Array(100)].map((_, i) => ({ headline: i }));

  constructor() {
    super();
  }

  afterRender() {
    const virtualList = document.querySelector('#virtual-list');

    // This will take a DocumentFragment or a string
    virtualList.virtualTemplate = data => html`<mc-list-item>
      <div slot="headline">${data.headline}</div>
    </mc-list-item>`;

    virtualList.virtualData = this.listItems;
  }
}

Style

CSS variables that allow you override default values
/* Optional variables for overriding */
  
--mc-list-item-container-color: var(--mc-surface);
--mc-list-item-text-color: var(--mc-on-surface);
--mc-list-item-selected-container-color: var(--mc-primary-container);
--mc-list-item-supporting-text-color: var(--mc-on-surface-variant);
--mc-list-item-trailing-supporting-text-color: var(--mc-on-surface-variant);
--mc-list-item-overline-text-color: var(--mc-on-surface-variant);
--mc-list-subheader-container-color: var(--mc-surface-container);
--mc-list-subheader-text-color: var(--mc-on-surface-variant);
menu home apps Get started