Enlite PrimeEnlite Prime

list

Log In

list

You are here:app / ui /  list

List Basic

The divider is displayed by default as <hr>. You can save the rendering of this DOM element by using the Divider property of the ListItem component.

Simple List Divider
Inset Divider
  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

src/app/containers/UiElements/demos/List/ListBasic.js

List Menu

Lists consist of a consecutive columns row. Each row contains a tile. Primary actions fill the tile and additional actions are represented by icons and text.

Menu List
Folder List
  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

Inset List
Nested List

src/app/containers/UiElements/demos/List/ListMenu.js

Pinned Subheader List

When scrolling, subheads remain fixed at the top of the screen until they are pushed out of the screen by the next subhead.

    • I'm sticky 0
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 1
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 2
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 3
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 4
    • Item 0
    • Item 1
    • Item 2

src/app/containers/UiElements/demos/List/PinnedList.js

List controls

The checkbox is the primary action and the state flag for the list item. The Comment button is a secondary action and a separate target.

Checkbox
  • Line item 1
  • Line item 2
  • Line item 3
  • Line item 4
Checkbox
  • R
    Line item 1
  • R
    Line item 2
  • R
    Line item 3
  • R
    Line item 4
Switch
  • Settings
  • Wi-Fi
  • Bluetooth

src/app/containers/UiElements/demos/List/ListControl.js

Interactive

Below is an interactive demo that lets you examine the visual results of various settings:

Text only
  • Single-line item
  • Single-line item
  • Single-line item
Icon with text
  • Single-line item
  • Single-line item
  • Single-line item
Avatar with text
  • Single-line item
  • Single-line item
  • Single-line item
Avatar with text and icon
  • Single-line item
  • Single-line item
  • Single-line item

src/app/containers/UiElements/demos/List/ListInteractive.js