Language: ENCN

List View (Table View)

List views are versatile and powerful user interface compontents frequently found in iOS apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.

List views have many purposes:

  • To let users navigate through hierarchically structured data
  • To present an indexed list of items
  • To display detail information and controls in visually distinct groupings
  • To present a selectable list of options

List View layout

Now let's look at the common layout of list view.

List block

List block is your list view elements wrapper, almost the same as content block but for list elements.

So first of all, all your list view elements should be wrapped with list-block element:

<div class="list-block">
    <ul>
        ... list elements here ...
    </ul>
</div>

Don't put "list-block" inside of "content-block"!

List block label

You can also add add list block label at the end of list block:

<div class="list-block">
    <ul>
        ... list elements here ...
    </ul>
    <div class="list-block-label">List block label text</div>
</div>

List item/element

Single list element has pretty complex but flexible layout:

<li>
    <div class="item-content">
        <div class="item-media">
            <i class="icon my-icon"></i>
        </div>
        <div class="item-inner">
            <div class="item-title">
                List element title
            </div>
            <div class="item-after">
                List element label
            </div>
        </div>
    </div>
</li>

Where:

  • item-content - main flex wrapper for item-media and item-inner. Requred element.

    • item-media - container for your media element like icon, image, etc. Optional element.

    • item-inner - main flex wrapper for item-title and item-after. Requred element.

      • item-title - single-line list item title. Required element.

      • item-after - list item label. Could countain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.

  • Because .item-content is actually CSS flex-box element, note that "item-media" and "item-inner" should be direct children of "item-content"!

  • For the same reason "item-title" and "item-after" should be direct children of "item-inner"!

Also note that if your list item have nothing additional, you can user "item-content" class in <li> element:

<li class="item-content">
    <div class="item-media">
        <i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
        <div class="item-title">
            List element title
        </div>
        <div class="item-after">
            List element label
        </div>
    </div>
</li>

Example

<body>
  ...
  <div class="page-content">
    <div class="content-block-title">Full Layout</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Item title</div>
            <div class="item-after">Label</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Item with badge</div>
            <div class="item-after"><span class="badge">5</span></div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Another item</div>
            <div class="item-after">Another label</div>
          </div>
        </li>
      </ul>
      <div class="list-block-label">List block label text goes here</div>
    </div>
    <div class="content-block-title">Only titles</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Item title</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Item with badge</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Another item</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

Link Elements

Of course in most cases we need to use list view elements as links (<a>) to other pages or data. In this case we need to wrap "item-content" with <a class="item-link"> element:

<a href="#" class="item-link">
  <div class="item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
</a>          

If your links contains nothing except "item-content" then we can just use link as "item-content":

<a href="#" class="item-link item-content">
  <div class="item-media">...</div>
  <div class="item-inner">...</div>
</a> 

Note that "item-inner" has additional right padding and chevron icon when it is in "item-link"

Example

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item with badge</div>
          <div class="item-after"><span class="badge">5</span></div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Another item</div>
          <div class="item-after">Another label</div>
        </div>
      </a>
    </li>
  </ul>
  <div class="list-block-label">List block label text goes here</div>
</div>

List Divider

List divider is a simple list element with title to visually divide one list items from another:

<li class="item-divider">Divider title here</li>
<div class="list-block">
  <ul>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Item title</div>
        <div class="item-after">Label</div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Title</div>
      </div>
    </li>
    
    <!-- Divider -->
    <li class="item-divider">Divider title here</li>
    
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Item with badge</div>
        <div class="item-after"><span class="badge">5</span></div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-media"><i class="icon icon-f7"></i></div>
      <div class="item-inner">
        <div class="item-title">Another item</div>
        <div class="item-after">Another label</div>
      </div>
    </li>
  </ul>
  <div class="list-block-label">List block label text goes here</div>
</div>

Grouped Lists

Sometimes we need to group list view elements inside of single list block. In this case we need to additional group elements:

<div class="list-block">
  <!-- First group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">First group</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item with badge</div>
          <div class="item-after"><span class="badge">5</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>
 
  <!-- Second group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">Second Group</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item with badge</div>
          <div class="item-after"><span class="badge">5</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>
</div>                  

You may ask what is the difference from simple dividers? With list groups, group titles have sticky position during scroll within single group.

Inset List Block

List blocks also could have inset (not fullwidth) styling. To make inset lost block just add "inset" class to "list-block":

<div class="list-block inset">
  <ul>
    ...
  </ul>
</div>          

It is also possible to make list inset only on iPad and keep it usual on iPhone. We need to use "tablet-inset" class for that:

<div class="list-block tablet-inset">
  <ul>
    ...
  </ul>
</div>