## 列表

常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组（sections/groups）。

列表有以下用途：

- 让用户可以浏览结构化的多级数据
- 展现一个索引列表
- 在可视化的不同分组中，显示详细信息和控件
- 展现一个可以选择的列表

{% highlight html %}
图标、标题和副标题

- 商品名称
  杜蕾斯
- 型号
  极致超薄型

标题和副标题

- 商品名称
  杜蕾斯
- 型号
  极致超薄型

带箭头

- 商品名称
  杜蕾斯
- 型号
  极致超薄型

{% endhighlight %}

其中：

- `item-content` - `item-media`和`item-inner`的主要弹性(flex)容器。必选元素。
- `item-media` - 媒体元素（如图标，图片等）的容器。可选元素。
- `item-inner` - `item-title`和`item-after`的主要弹性(flex)容器。必选元素。
- `item-title` - 单行列表项目标题。必选元素。
- `item-after` - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。可选元素。

在 `.item-content` 上加上 `.item-link` 会增加一个向右的箭头。

### 联系人列表（Contacts List）

联系人列表用来展示个人的联系方式。

联系人列表是分组列表（Grouped Lists）的一个特殊的类型，主要有2点不同：

- 列表区域元素（“list-block”）需要带上额外的“contacts-block”类
- 页面内容元素（“page-content”）需要带上额外的“contacts-content”类

{% highlight html %}

- A
- 标题1
- 标题2
- 标题3
- 标题4
- 标题5
- 标题6
- 标题7
- 标题8

- B
- 标题1
- 标题2
- 标题3
- 标题4
- 标题5
- 标题6

- C
- 标题1
- 标题2
- 标题3
- 标题4
- 标题5
- 标题6
- 标题7

- V
- 标题1

{% endhighlight %}

### 多媒体列表（Media List View）

多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。

当然，它的布局更为复杂：

{% highlight html %}
曲目

- 标题
  $15
  标题
  此处是文本内容...

邮件应用

- Facebook
  17:14
  子标题
  此处是文本内容...

简单列表

- 标题
  子标题

嵌入式

- 标题
  子标题

{% endhighlight %}

其中：

- `item-media`和`item-inner`的主要弹性(flex)容器。必选元素。
- `item-media` - 媒体元素（如图标，图片等）的容器. 可选元素。
- `item-inner` - `item-title`和`item-after`的主要弹性(flex)容器。必选元素。
- `item-title-row` - `item-title` 和 `item-after`的主要弹性(flex)容器。必选元素。
- `item-title` - 单行列表项目标题。可选元素。
- `item-after` - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。可选元素。
- `item-subtitle` - 额外的单行标题。可选元素。
- `item-text` - 额外的两行布局的容器，用来放置细节描述。可选元素。

### 可选择列表

列表可以支持单选和多选，我们只是修改了 `checkbox` 和 `radio` 的样式，并没有进行任何JS操作。所以如果取数据，需要从其中隐藏的 `input` 元素中取，和原生的表单用法完全一样。

列表是单选还是多选，完全取决于 `input` 的 `type` 属性设置。目前我们对单选和多选的图标样式是没有做区分的，后续可能会设置不同的样式以区分单选和多选。

{% highlight html %}

- 石头
  17:14
  New messages from John Doe
  Lorem ipsum dolor sit amet...
- 剪刀
  17:14
  New messages from John Doe
  Lorem ipsum dolor sit amet...

{% endhighlight %}

因为选择操作是由原生的 `input` 实现的，所以只需要把上面的代码中的 input 元素的 `type="radio"` 改成 `type="checkbox"` 就可以变成多选。