dd

列表(表格)


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

列表有以下用途:

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

列表布局

现在让我们看一下常见的列表布局

列表区(List block)

列表区(List block)是你的列表元素的容器,基本和内容区(Content Block)一样,只不过面向列表元素。

首先, 所有的列表元素都要被包裹在含有“list-block”类的元素中:

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

不要将带有list-block类的元素放置在“content-block”中!

列表区标签(List block label)

你可以将列表区标签(List block label)加在列表区(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)

单个列表项目的布局相当复杂而灵活:

<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>

其中:

  • item-content - item-mediaitem-inner的主要弹性(flex)容器。必选元素。

    • item-media - 媒体元素(如图标,图片等)的容器。可选元素。

    • item-inner - item-titleitem-after的主要弹性(flex)容器。必选元素。

      • item-title - 单行列表项目标题。必选元素。

      • item-after - 列表项目标签。可以包含任意额外的html元素(例如标签文本、徽章、switch/toggle、按钮等等)。可选元素。

  • 因为.item-content元素的是display属性是flex-box, 需要注意,“item-media”和“item-inner”应该是“item-content”的直接子元素!

  • 同样的,“item-title”和“item-after”应该是“item-inner”的直接子元素!

同时需要注意,如果你的列表项目不含其它元素, 你可以把“item-content”类直接加在<li>元素上:

<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>

示例

<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>

实例预览

链接元素

当然,多数情况下我们需要将列表中的元素当作链接使用(<a>),来指向其他页面或者其他数据。在这种情况下,我们需要将“item-content”包裹在<a class="item-link">元素中:

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

 

如果你的链接只包含“item-content”,那我们可以直接将链接作为“item-content”:

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

注意,当“item-inner”在“item-link”中时,会有额外的右内边距(right padding)和chevron icon

示例

<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)

列表分隔元素是一个简单的列表元素并包含标题,它在视觉上分隔两个列表元素:

<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>
    <!-- 分隔元素 -->
    <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)

有时我们需要将列表区里的元素分组,在这种情况下,我们需要用额外的分组元素:

<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>

实例预览

也许你会问分组元素和分隔元素有什么区别?如果使用了分组元素,当在分组内部滚动时,标题会保持在固定位置。

内嵌列表区域(Inset List Block)

列表区还有内嵌(非全屏)样式,只需要给列表区域元素加上“inset”类:

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

使用“tablet-inset”类,可以使列表区在iPad下以内嵌的方式显示,而在iPhone中以普通样式显示:

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

实例预览