列表视图（表格视图）
列表视图是多才多艺且功能强大的用户界面组件，经常在应用中找到它们。列表视图将数据显示为可滚动列表，包含可能分为多个章节/组的多个行。
列表视图有许多用途
- 允许用户浏览分层结构化的数据
- 显示项目的索引列表
- 在视觉上明确的分组中显示详细信息和控件
- 显示可选选项列表
列表视图区块
列表区块是列表视图元素的包装器。
因此，首先，所有列表视图元素都应该用 <div class="list"> 元素进行包装
<div class="list">
<ul>
... list elements here ...
</ul>
</div>要为列表区块添加额外的突出显示，我们需要额外的 list-strong 类
<div class="list list-strong">
<!-- block content -->
</div>要为列表区块添加轮廓线（边框），我们需要额外的 list-outline 类
<div class="list list-outline">
<ul>
... list elements here ...
</ul>
</div>要在列表项之间添加分隔符（边框），我们需要额外的 list-dividers 类
<div class="list list-dividers">
<ul>
... list elements here ...
</ul>
</div>要使列表区块缩进，我们需要额外的 inset 类
<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>其中
item-content-item-media和item-inner的主 flex 包装器。必需元素。item-media- 用于媒体元素的容器，如图标、图像等。可选元素。item-inner-item-title和item-after的主 flex 包装器。必需元素。item-title- 单行列表项标题。必需元素。item-after- 列表项标签。可以包含任何其他 HTML 元素，如标签文本、徽章、开关/切换或按钮等。可选元素。
因为 .item-content 实际上是 CSS flex-box 元素，所以请注意
item-media和item-inner应该是item-content的直接子元素！由于同样的原因
item-title和item-after应该是item-inner的直接子元素！
另外请注意，如果列表项没有任何其他内容，则可以在 <li> 元素上使用 item-content 类
<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 元素
<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>）。在这种情况下，我们需要使用 <a class="item-link"> 元素来包装 item-content
<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 中时，它具有额外的右填充和人字形图标
要删除此个人字形图标和额外填充，可以为链接项或包含的列表添加 no-chevron 类
分组列表
有时我们需要在单个列表区块内对列表视图元素进行分组。在这种情况下，我们需要额外的 list-group 元素
<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> 项目布局的列表块添加额外的类 simple-list
<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> 项目布局的列表块添加额外的类 links-list
<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>其中
item-content-item-media和item-inner的主 flex 包装器。必需元素。item-media- 用于媒体元素的容器，如图标、图像等。可选元素。item-inner- 必需元素。item-title-row-item-title和item-after的主要 flex 包装器。可选元素。item-title- 单行列表项标题。可选元素。item-after- 列表项标签。可以包含任何其他 HTML 元素，如标签文本、徽章、开关/切换或按钮等。可选元素。item-subtitle- 附加单行标题。可选元素。item-text- 详细说明的附加双行容器。可选元素。
在媒体列表中使用链接项 (item-link) 时，它会在 item-title 级别呈现人字形图标 (>)。如果你想将此波浪号移动到项目中心，那么你需要为此项目或包含的列表添加 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>