Example
Headline
Supporting text
trailing
overline
Headline
Supporting text
Multiline
Line one
Line two
States
Headline
trailing
<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
Single line
Line one
Line two
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
Icons
Icon buttons
Hover to show more buttons
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 select
Headline
Headline
Headline
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', () => {});
Sections and headers
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
<mc-list style="overflow: scroll; height: 260px;"> <div> <mc-list-subheader>Section one</mc-list-subheader> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> </div> <div> <mc-list-subheader>Section two</mc-list-subheader> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> </div> <div> <mc-list-subheader>Section three</mc-list-subheader> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> <mc-list-item multiline> <mc-icon slot="start">person</mc-icon> <div slot="headline">Headline</div> <div slot="supporting-text">Supporting text</div> </mc-list-item> </div> </mc-list>
Swipe actions (mobile only)
Headline
Supporting text
Headline
Supporting text
Headline
Supporting text
<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
Two
Click and hold to drag
Three
Click and hold to drag
Four
Click and hold to drag
<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); });
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);