List

a column of rows; each list item carries an icon, label, supporting line, selection and tone.

Example

Inbox
Sent24 messages
Drafts
Trash
<div class="lucent-list" role="list">
  <div class="lucent-list-item is-selected is-interactive" role="button" tabindex="0">
    <span class="lucent-icon lucent-icon--sm lucent-list-item__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">inbox</span>
    </span>
    <span class="lucent-list-item__content">
      <span class="lucent-list-item__primary">Inbox</span>
    </span>
  </div>
  <div class="lucent-list-item is-interactive" role="button" tabindex="0">
    <span class="lucent-icon lucent-icon--sm lucent-list-item__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">send</span>
    </span>
    <span class="lucent-list-item__content">
      <span class="lucent-list-item__primary">Sent</span>
      <span class="lucent-list-item__supporting">24 messages</span>
    </span>
  </div>
  <div class="lucent-list-item is-interactive" role="button" tabindex="0">
    <span class="lucent-icon lucent-icon--sm lucent-list-item__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">drafts</span>
    </span>
    <span class="lucent-list-item__content">
      <span class="lucent-list-item__primary">Drafts</span>
    </span>
  </div>
  <div class="lucent-list-item is-interactive is-danger" role="button" tabindex="0">
    <span class="lucent-icon lucent-icon--sm lucent-list-item__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">delete</span>
    </span>
    <span class="lucent-list-item__content">
      <span class="lucent-list-item__primary">Trash</span>
    </span>
  </div>
</div>

Using it

Angular lucent-list, lucent-list-item
import { LucentList, LucentListItem } from '@design-foundry/lucent-angular';
Stylesheet .lucent-list, .lucent-list-item
@design-foundry/lucent-styles/core.css

API

NameKindTypeDefaultDescription
list-item value input T Identity carried by `(activated)`; also the row's selection value.
list-item label input string '' primary text.
list-item icon input string '' leading glyph.
list-item selected input boolean false chosen row.
list-item disabled input boolean false
list-item interactive input boolean true makes the row a button.
list-item tone input default | danger default destructive intent.
list-item activated output T | undefined emits the row value on click or Enter.

Theming

Color (9)
Size & spacing (6)
Border & radius (2)
Shadow (1)
Type (2)