列视图（表格视图）

列表视图是应用程序中常见且功能强大的用户界面组件。列表视图以可滚动的多行列表形式呈现数据，这些行可以分成多个部分/组。

列表视图有多种用途：

列视图区块

列区块是您的列视图元素的包装器。

所以首先，所有您的列视图元素都应该用<div class="list">element:

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

来添加额外的突出显示到列区块我们需要的额外list-strong类

<div class="list list-strong">
  <!-- block content -->
</div>

来添加轮廓（边框）围绕列区块我们需要的额外list-outline class:

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

来添加分隔符（边框）之间列表项我们需要的额外list-dividers class:

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

来使列区块内嵌我们需要的额外inset class:

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

来使区块仅在大型屏幕上内嵌我们需要使用medium-inset（>= 768px）类而不是：

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

对于这样的响应式类的完整集检查网格文档。它们是xsmall-inset, small-inset, medium-inset, large-inset, xlarge-inset.

列表项

单个列表元素有相当复杂但灵活的布局：

<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实际上是CSS flex-box元素，请注意item-media和item-inner应该是item-content!

  • 的直接子元素。对于相同的原因item-title和item-after应该是item-inner!

还要注意，如果您的列表项没有其他内容，您可以使用item-content类在<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>

如果我们需要在项的标题之外添加列表项标题/底部文本我们可以使用item-header和item-footer elements:

<li>
  <div class="item-content">
    <div class="item-media">
      <i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
      <div class="item-title">
        <!-- Item header, must be first child of item-title -->
        <div class="item-header">Item header text</div>
        List element title
        <!-- Item footer, must be last child of item-title -->
        <div class="item-footer">Item footer text</div>
      </div>
      <div class="item-after">...</div>
    </div>
  </div>
</li>

当然在大多数情况下我们需要使用列视图元素作为链接（<a>）到其他页面或数据。在这种情况下我们需要用item-content包裹<a class="item-link">element:

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

如果您的链接除了“item-content”什么都没有那么我们可以直接使用链接作为“item-content”：

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

注意item-inner在它是item-link

时有额外的右内边距和 chevron 图标。要删除这个 chevron 图标和额外的内边距，您可以添加no-chevron类到链接项或包含的列表

分组列表

有时我们需要在单个列区块内分组列视图元素。在这种情况下我们需要额外的list-group elements:

<div class="list">
  <!-- First group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">First group</li>
      <li class="item-content">...</li>
      <li class="item-content">...</li>
      ...
    </ul>
  </div>

  <!-- Second group-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">Second Group</li>
      <li class="item-content">...</li>
      <li class="item-content">...</li>
      ...
    </ul>
  </div>
</div>

简单列表

在我们需要具有仅标题的简单项结构的列表的情况下我们可以使用简单列表修改。在这种情况下我们需要额外的类simple-list在具有纯<li>项布局的列区块上：

<div class="list simple-list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    ...
  </ul>
</div>

在我们需要具有仅标题的简单链接项结构的列表的情况下我们可以使用链接列表修改。在这种情况下我们需要额外的类links-list在具有纯<li><a>...</a></li>项布局的列区块上：

<div class="list links-list">
  <ul>
    <li>
      <a href="#">Link Item 1</a>
    </li>
    <li>
      <a href="#">Link Item 2</a>
    </li>
    <li>
      <a href="#">Link Item 3</a>
    </li>
    ...
  </ul>
</div>

媒体列表

媒体列表视图是列表视图的扩展情况旨在显示更复杂的数据如产品，服务，用户等。在这种情况下我们需要额外的media-list类在列区块上。

当然它有一个稍微更复杂的布局：

<!-- Media list block has additional "media-list" class -->
<div class="list 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>

Where:

当您在媒体列表中使用链接项（item-link）时它将在>级别渲染 chevron 图标。如果您想把这个 chevron移动到项的中心那么您需要添加item-title. If you want to move this chevron to the center of item, then you need to add chevron-center类到这个项或包含的列表

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

注意，注释掉的变量默认未指定，其值在这种情况下是它们回退到的值。

:root {
  --f7-list-inset-side-margin: 16px;
  --f7-list-item-padding-horizontal: 16px;
  --f7-list-item-padding-vertical: 8px;
  --f7-list-media-item-padding-horizontal: 16px;
  --f7-list-item-text-max-lines: 2;
  --f7-list-chevron-icon-font-size: 20px;
  --f7-list-item-media-margin: 16px;
  --f7-list-item-title-font-size: inherit;
  --f7-list-item-title-font-weight: 400;
  --f7-list-item-title-line-height: inherit;
  --f7-list-item-title-white-space: nowrap;
  --f7-list-item-subtitle-font-weight: 400;
  --f7-list-item-subtitle-line-height: inherit;
  --f7-list-item-text-font-weight: 400;
  --f7-list-item-after-font-weight: 400;
  --f7-list-item-after-line-height: inherit;
  --f7-list-item-header-font-size: 12px;
  --f7-list-item-header-font-weight: 400;
  --f7-list-item-header-line-height: 1.2;
  --f7-list-item-footer-font-size: 12px;
  --f7-list-item-footer-font-weight: 400;
  --f7-list-item-footer-line-height: 1.2;
  /*
  --f7-list-button-text-color: var(--f7-theme-color);
  */
  --f7-list-button-font-size: inherit;
  --f7-list-button-font-weight: 400;
  --f7-list-button-text-align: center;
  --f7-list-group-title-line-height: inherit;
  --f7-menu-list-font-size: 14px;
  --f7-menu-list-item-title-font-size: 14px;
  --f7-menu-list-item-title-font-weight: 500;
  --f7-menu-list-item-subtitle-font-size: 14px;
  --f7-menu-list-item-text-font-size: 14px;
  --f7-menu-list-item-after-font-size: 14px;
  --f7-list-outline-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
  --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-outline-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-group-title-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --f7-list-in-list-padding-left: 30px;
  --f7-list-inset-border-radius: 8px;
  --f7-list-margin-vertical: 35px;
  --f7-list-font-size: 17px;
  --f7-list-chevron-icon-area: 20px;
  --f7-list-item-title-text-color: inherit;
  --f7-list-item-subtitle-text-color: inherit;
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-list-item-subtitle-font-size: 15px;
  --f7-list-item-text-font-size: 15px;
  --f7-list-item-text-line-height: 21px;
  --f7-list-item-after-font-size: inherit;
  --f7-list-item-after-padding: 5px;
  --f7-list-item-min-height: 44px;
  --f7-list-item-media-icons-margin: 5px;
  --f7-list-media-item-padding-vertical: 10px;
  --f7-list-media-item-title-font-weight: 600;
  --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
  /*
  --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  */
  --f7-list-group-title-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-group-title-height: 31px;
  --f7-list-group-title-font-size: inherit;
  --f7-list-group-title-font-weight: 400;
  --f7-menu-list-offset: 8px;
  --f7-menu-list-border-radius: 8px;
  --f7-menu-list-item-bg-color: transparent;
  --f7-menu-list-item-text-color: inherit;
  --f7-menu-list-item-min-height: 44px;
  --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-outline-inset-border-color: rgba(0, 0, 0, 0.22);
  --f7-list-strong-bg-color: #fff;
  --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-item-header-text-color: inherit;
  --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
  --f7-list-group-title-bg-color: #f7f7f7;
  --f7-menu-list-item-selected-text-color: var(--f7-theme-color);
  --f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
.ios .dark,
.ios.dark {
  --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
  --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
  --f7-list-strong-bg-color: #1c1c1d;
  --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  --f7-list-group-title-bg-color: #232323;
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
  --f7-menu-list-item-selected-text-color: inherit;
  --f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
}
.md {
  --f7-list-in-list-padding-left: 24px;
  --f7-list-inset-border-radius: 16px;
  --f7-list-margin-vertical: 32px;
  --f7-list-font-size: 16px;
  --f7-list-chevron-icon-area: 26px;
  --f7-list-item-subtitle-font-size: 14px;
  --f7-list-item-text-font-size: 14px;
  --f7-list-item-text-line-height: 20px;
  --f7-list-item-after-font-size: 14px;
  --f7-list-item-after-padding: 8px;
  --f7-list-item-min-height: 48px;
  --f7-list-item-media-icons-margin: 8px;
  --f7-list-media-item-padding-vertical: 12px;
  --f7-list-media-item-title-font-weight: 500;
  --f7-list-button-border-color: transparent;
  /*
  --f7-list-button-pressed-bg-color: transparent;
  */
  --f7-list-group-title-border-color: transparent;
  --f7-list-group-title-height: 48px;
  --f7-list-group-title-font-size: 16px;
  --f7-list-group-title-font-weight: 400;
  --f7-menu-list-offset: 16px;
  --f7-menu-list-border-radius: 999px;
  --f7-menu-list-item-min-height: 56px;
  --f7-list-link-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-list-outline-inset-border-color: var(--f7-md-outline);
  --f7-list-item-border-color: var(--f7-md-outline);
  --f7-list-item-title-text-color: var(--f7-md-on-surface);
  --f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
  --f7-list-group-title-bg-color: var(--f7-md-surface-2);
  --f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
  --f7-list-strong-bg-color: var(--f7-md-surface-1);
  --f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
  --f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
  --f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
  --f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);
  --f7-menu-list-item-text-color: var(--f7-md-on-surface-variant);
  --f7-menu-list-item-bg-color: var(--f7-md-surface-1);
  --f7-menu-list-item-selected-text-color: var(--f7-md-on-secondary-container);
  --f7-menu-list-item-selected-bg-color: var(--f7-md-secondary-container);
}

示例

list.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">List View</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Framework7 allows you to be flexible with list views (table views). You can make them as navigation menus, you
        can use there icons, inputs, and any elements inside of the list, and even make them nested:</p>
    </div>
    <div class="block-title">Simple List</div>
    <div class="list list-dividers-ios simple-list">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <div class="block-title">Strong List</div>
    <div class="list list-strong list-dividers-ios simple-list">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <div class="block-title">Strong Outline List</div>
    <div class="list list-strong list-outline list-dividers-ios simple-list">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <div class="block-title">Strong Inset List</div>
    <div class="list list-strong inset list-dividers-ios simple-list">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <div class="block-title">Strong Outline Inset List</div>
    <div class="list list-strong list-outline inset list-dividers-ios simple-list">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <div class="block-title">Simple Links List</div>
    <div class="list links-list list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li><a>Link 1</a></li>
        <li><a>Link 2</a></li>
        <li><a>Link 3</a></li>
      </ul>
    </div>
    <div class="block-title">Data list, with icons</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Ivan Petrov</div>
              <div class="item-after">CEO</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">John Doe</div>
              <div class="item-after"> <span class="badge">5</span></div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Jenna Smith</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="block-title">Links</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Ivan Petrov</div>
              <div class="item-after">CEO</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">John Doe</div>
              <div class="item-after">Cleaner</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Jenna Smith</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="block-title">Links, Header, Footer</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">
                <div class="item-header">Name</div>
                John Doe
              </div>
              <div class="item-after">Edit</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">
                <div class="item-header">Phone</div>
                +7 90 111-22-3344
              </div>
              <div class="item-after">Edit</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">
                <div class="item-header">Email</div>
                john@doe
                <div class="item-footer">Home</div>
              </div>
              <div class="item-after">Edit</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">
                <div class="item-header">Email</div>
                john@framework7
                <div class="item-footer">Work</div>
              </div>
              <div class="item-after">Edit</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="block-title">Links, no icons</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Ivan Petrov</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">John Doe</div>
            </div>
          </a>
        </li>
        <li class="list-group-title">Group Title Here</li>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Ivan Petrov</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Jenna Smith</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="block-title">Grouped with sticky titles</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios">
      <div class="list-group">
        <ul>
          <li class="list-group-title">A</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Aaron </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Abbie</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Adam</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">B</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Bailey</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Barclay</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Bartolo</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">C</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Caiden</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Calvin</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Candy</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="block-title">Mixed and nested</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Ivan Petrov</div>
              <div class="item-after">CEO</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Two icons here</div>
            </div>
          </a>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">No icons here</div>
            </div>
          </div>
          <ul>
            <li>
              <a class="item-link item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Ivan Petrov</div>
                  <div class="item-after">CEO</div>
                </div>
              </a>
            </li>
            <li>
              <a class="item-link item-content">
                <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Two icons here</div>
                </div>
              </a>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">No icons here</div>
                </div>
              </div>
            </li>
            <li>
              <a class="item-link item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">Ultra long text goes here, no, it is really really long</div>
                </div>
              </a>
            </li>
            <li>
              <div class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">With toggle</div>
                  <div class="item-after">
                    <label class="toggle toggle-init">
                      <input type="checkbox">
                      <span class="toggle-icon"></span>
                    </label>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Ultra long text goes here, no, it is really really long</div>
            </div>
          </a>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">With toggle</div>
              <div class="item-after">
                <label class="toggle toggle-init">
                  <input type="checkbox" />
                  <span class="toggle-icon"></span>
                </label>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Tablet inset</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios medium-inset">
      <ul>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Ivan Petrov</div>
              <div class="item-after">CEO</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Two icons here</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><i class="icon icon-f7"></i></div>
            <div class="item-inner">
              <div class="item-title">Ultra long text goes here, no, it is really really long</div>
            </div>
          </a>
        </li>
      </ul>
      <div class="block-footer">
        <p>This list block will look like "inset" only on tablets (iPad)</p>
      </div>
    </div>

    <div class="block-title">Media Lists</div>
    <div class="block">
      <p>Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more
        complex data, like products, services, users, etc.</p>
    </div>
    <div class="block-title">Songs</div>
    <div class="list media-list  list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link">
            <div class="item-content">
              <div class="item-media"><img style="border-radius: 8px"
                  src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="70" />
              </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, consectetur adipiscing elit. Nulla sagittis tellus ut
                  turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                  amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                  vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><img style="border-radius: 8px"
                src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="70" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Don't Stop Me Now</div>
                <div class="item-after">$22</div>
              </div>
              <div class="item-subtitle">Queen</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-media"><img style="border-radius: 8px"
                src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="70" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Billie Jean</div>
                <div class="item-after">$16</div>
              </div>
              <div class="item-subtitle">Michael Jackson</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="block-title">Mail App</div>
    <div class="list media-list list-outline-ios list-strong-ios list-dividers-ios">
      <ul>
        <li>
          <a 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, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">John Doe (via Twitter)</div>
                <div class="item-after">17:11</div>
              </div>
              <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Facebook</div>
                <div class="item-after">16:48</div>
              </div>
              <div class="item-subtitle">New messages from John Doe</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">John Doe (via Twitter)</div>
                <div class="item-after">15:32</div>
              </div>
              <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="block-title">With centered chevron icon</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios media-list chevron-center">
      <ul>
        <li>
          <a 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, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">John Doe (via Twitter)</div>
                <div class="item-after">17:11</div>
              </div>
              <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="block-title">Something more simple</div>
    <div class="list list-outline-ios list-strong-ios list-dividers-ios media-list">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-media"><img style="border-radius: 8px"
                src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="40" />
            </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>
        <li><a class="item-link item-content">
            <div class="item-media"><img style="border-radius: 8px"
                src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="40" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Don't Stop Me Now</div>
              </div>
              <div class="item-subtitle">Queen</div>
            </div>
          </a>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><img style="border-radius: 8px"
                src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="40" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Billie Jean</div>
              </div>
              <div class="item-subtitle">Michael Jackson</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>
改进此文档
在本页上