List

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

{% highlight html %}

List view

With icon, title and after

Bom

12:12
Gender

Male

With title and after

Bom

12:12
Gender

Male

With Arrow

Bom

12:12
Gender

Male

{% endhighlight %}

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.

Add .item-link class on .item-content will make it show a right arrow。

Contacts List

Show contacts

Contacts list is a particular case of Grouped Lists with two differences:

list-block should have additional contacts-block class
page-content should have additional contacts-content class

Contacts list will auto have a iOS-like index list on the right side - it's named index list. Try it on the demo on the right side ->

The index list is a JS component, it will auto init when page init. You should init it like this if your contacts list is load by ajax:

{% highlight js %} $(".contacts-block").indexList(); {% endhighlight %}

{% highlight html %}

Contacts List

A
Person0
Person1
Person2
Person3
Person4
Person5
Person6
Person7

B
Tom
TOm
Tom3
Tom4
Tom5
Tom6

C
David1
David2
David3
David4
David5
David6
David7

V
Lily1

{% endhighlight %}

Media List View

Media list view is extended case of list view indended to display more complex data like products, services, users, etc.

And of course it has a bit more complex layout:

{% highlight html %}

Media List

Title

Title

$15

Title

some text here...

Mail App

Facebook

17:14

Title

Some text here...

Simple list

Title

sub title

Inset

Title

Subtitle

{% endhighlight %}

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 - Requred element.

item-title-row - main flex wrapper for item-title and item-after. Optional element.

item-title - single-line list item title. Optional 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.

item-subtitle - additional single-line title. Optional element.
item-text - additional two-lines container for detailed description. Optional element.

Selectable List

List can be selected with checkbox or radio. You can put checkbox or radio in List, and the list item will have a selected style when user select. There is no JS at all, So you should read data from the hidden checkbox or radoi

{% highlight html %}

Lily

17:14

New messages from John Doe

Lorem ipsum dolor sit amet...
Lucy

17:14

New messages from John Doe

Lorem ipsum dolor sit amet...

{% endhighlight %}

Change the type of input to "checkbox" to make multiple select.