语言: 英文中文

多媒体列表(Media List View)

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

当然,它的布局更为复杂:

<!-- 多媒体列表有额外的“media-list”类 -->
<div class="list-block media-list">
    <ul>
        <li>
            <div class="item-content">
                <div class="item-media">
                    <img src="path/to/img.jpg">
                </div>
                <div class="item-inner">
                    <div class="item-title-row">
                        <div class="item-title">Element title</div>
                        <div class="item-after">Element label</div>
                    </div>
                    <div class="item-subtitle">Subtitle</div>
                    <div class="item-text">Additional description text</div>
                </div>
            </div>
        </li>
    </ul>
</div>

其中:

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

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

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

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

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

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

      • item-subtitle - 额外的单行标题。可选元素。

      • item-text - 额外的两行布局的容器,用来放置细节描述。可选元素。

示例

<div class="content-block-title">Songs</div>
<div class="list-block media-list">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><img src="..." width="80"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
            <div class="item-after">$15</div>
          </div>
          <div class="item-subtitle">Beatles</div>
          <div class="item-text">Lorem ipsum dolor sit amet...</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>
<div class="content-block-title">Mail App</div>
<div class="list-block media-list">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Facebook</div>
            <div class="item-after">17:14</div>
          </div>
          <div class="item-subtitle">New messages from John Doe</div>
          <div class="item-text">Lorem ipsum dolor sit amet...</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>
<div class="content-block-title">Something more simple</div>
<div class="list-block media-list">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-media"><img src="..." width="44"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
          </div>
          <div class="item-subtitle">Beatles</div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>
<div class="content-block-title">Inset</div>
<div class="list-block media-list inset">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><img src="..." width="44"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
          </div>
          <div class="item-subtitle">Beatles</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>