- 起步
- Events
- 路由 / 导航
- Store
- Components
- App / Core核心
- 展开折叠
- 操作菜单
- 面积图表
- 自动完成
- 徽标
- 内容面板
- 面包屑
- 按钮
- 日历 / 日期选择
- 卡片
- 复选框
- 条块/标签
- 颜色选择器
- 联系人列表
- 数据表格
- 对话框
- 浮动动作按钮 / FAB
- 表单数据处理
- 仪表盘
- Grid栅格布局
- 图标
- 无限滚动
- form输入框/表单
- 连接
- 列表按钮
- 列表视图
- 列表索引
- 登录界面
- 菜单列表
- 聊天框
- 聊天消息
- 导航栏
- 通知
- page页面
- 面板/边框面板
- 图片浏览
- 底部弹出选择器
- 饼状图
- 悬停弹出窗口
- 对话框
- 加载指示器
- 进度条
- 下拉刷新
- 单选框
- 滑动条
- 搜索栏
- tab按钮segment
- 自定义弹出框
- 骨架屏
- 弹出/切换选择
- 拖动排序
- 状态条
- 加减数按钮
- 子导航
- 左滑操作按钮
- Swiper滚动图
- Tabs结构
- 富文本编辑器
- 时间轴
- Toast消息提示
- Toggle开关
- 顶部栏 / 底部栏
- tooltip悬停提示消息
- 树形菜单视图
- 视图 / 路由
- 虚拟列表
- Framework7 图标
- Styling
- Dom7
- Touch Utilities
- Utilities
- Plugins API
- Lazy Modules
- Custom Build
List View (Table View)
List views are versatile and powerful user interface components frequently found in apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.
List views have many purposes:
- To let users navigate through hierarchically structured data
- To present an indexed list of items
- To display detail information and controls in visually distinct groupings
- To present a selectable list of options
List View Block
List block is your list view elements wrapper.
So first of all, all your list view elements should be wrapped with <div class="list"> element:
<div class="list">
<ul>
... list elements here ...
</ul>
</div>To add extra highlighting to list block we need additional list-strong class
<div class="list list-strong">
<!-- block content -->
</div>To add outline (borders) around the list block we need additional list-outline class:
<div class="list list-outline">
<ul>
... list elements here ...
</ul>
</div>To add dividers (borders) between list items we need additional list-dividers class:
<div class="list list-dividers">
<ul>
... list elements here ...
</ul>
</div>To make list block inset we need additional inset class:
<div class="list inset">
<ul>
... list elements here ...
</ul>
</div>To make block inset only on large screens we need to use medium-inset (>= 768px) class instead:
<div class="list medium-inset">
<ul>
... list elements here ...
</ul>
</div>For full set of such responsive classes check Grid docs. They are xsmall-inset, small-inset, medium-inset, large-inset, xlarge-inset.
List Item
Single list element has pretty complex but flexible layout:
<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- main flex wrapper foritem-mediaanditem-inner. Required element.item-media- container for your media element like icon, image, etc. Optional element.item-inner- main flex wrapper foritem-titleanditem-after. Required element.item-title- single-line list item title. Required element.item-after- list item label. Could contain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.
Because .item-content is actually CSS flex-box element, note that
item-mediaanditem-innershould be direct children ofitem-content!For the same reason
item-titleanditem-aftershould be direct children ofitem-inner!
Also note that if your list item has nothing additional, you can user item-content class on <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>List Item Header/Footer
If we need to add list item header/footer text in addition to item's title we can use item-header and 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>Link Item
Of course in most cases we need to use list view elements as links (<a>) to other pages or data. In this case we need to wrap item-content with <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>If your links contains nothing except "item-content" then we can just use link as "item-content":
<li>
<a href="#" class="item-link item-content">
<div class="item-media">...</div>
<div class="item-inner">...</div>
</a>
</li>Note that item-inner has additional right padding and chevron icon when it is in item-link
To remove this chevron icon and extra padding, you can add no-chevron class to link item or to containing list
Grouped Lists
Sometimes we need to group list view elements inside of single list block. In this case we need to additional 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
In case we need list with simple items structure that have only titles, we may use Simple List modification. In this case we need additional class simple-list on list block with plain <li> items layout:
<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
In case we need list with simple link items structure that have only titles, we may use Links List modification. In this case we need additional class links-list on list block with plain <li><a>...</a></li> items layout:
<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 view is extended case of List View intended to display more complex data like products, services, users, etc. In this case we need additional media-list class on list block.
And of course it has a bit more complex layout:
<!-- 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-content- main flex wrapper foritem-mediaanditem-inner. Required element.item-media- container for your media element like icon, image, etc. Optional element.item-inner- Required element.item-title-row- main flex wrapper foritem-titleanditem-after. Optional element.item-title- single-line list item title. Optional element.item-after- list item label. Could contain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.item-subtitle- additional single-line title. Optional element.item-text- additional two-lines container for detailed description. Optional element.
When you use Link Item (item-link) in media list it will render chevron icon (>) at the level of item-title. If you want to move this chevron to the center of item, then you need to add chevron-center class to this item or to the containing list
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
Note that commented variables are not specified by default and their values is what they fallback to in this case.
: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);
}
Examples
list.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">返回</span>
</a>
</div>
<div class="title">列表视图</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Framework7 允许您以灵活的方式使用列表视图（表格视图）。您可以将它们作为导航菜单使用，您还可以使用其中的图标、输入和列表中的任何其他元素，甚至可以使其嵌套：
</p>
</div>
<div class="block-title">简单列表</div>
<div class="list list-dividers-ios simple-list">
<ul>
<li>条目 1</li>
<li>条目 2</li>
<li>条目 3</li>
</ul>
</div>
<div class="block-title">加粗列表</div>
<div class="list list-strong list-dividers-ios simple-list">
<ul>
<li>条目 1</li>
<li>条目 2</li>
<li>条目 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>条目 1</li>
<li>条目 2</li>
<li>条目 3</li>
</ul>
</div>
<div class="block-title">加粗内嵌列表</div>
<div class="list list-strong inset list-dividers-ios simple-list">
<ul>
<li>条目 1</li>
<li>条目 2</li>
<li>条目 3</li>
</ul>
</div>
<div class="block-title">加粗外边框列表</div>
<div class="list list-strong list-outline inset list-dividers-ios simple-list">
<ul>
<li>条目 1</li>
<li>条目 2</li>
<li>条目 3</li>
</ul>
</div>
<div class="block-title">简单的链接列表</div>
<div class="list links-list list-outline-ios list-strong-ios list-dividers-ios">
<ul>
<li><a>链接 1</a></li>
<li><a>链接 2</a></li>
<li><a>链接 3</a></li>
</ul>
</div>
<div class="block-title">带图标的数据列表</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">布拉德</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">约翰</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">史密斯</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">链接</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>
<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">约翰</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"> 史密斯</div>
</div>
</a>
</li>
</ul>
</div>
<div class="block-title">链接，标题，结尾</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">名字</div>
约翰
</div>
<div class="item-after">编辑</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">电话</div>
+7 90 111-22-3344
</div>
<div class="item-after">编辑</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">邮件</div>
john@qq.com
<div class="item-footer">主页</div>
</div>
<div class="item-after">编辑</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">邮件</div>
john@qq.com
<div class="item-footer">工作</div>
</div>
<div class="item-after">编辑</div>
</div>
</a>
</li>
</ul>
</div>
<div class="block-title">链接没有图标</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">伊万</div>
</div>
</a>
</li>
<li>
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">约翰</div>
</div>
</a>
</li>
<li class="list-group-title">组标题</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">固定的组标题</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">组合嵌套</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">媒体列表</div>
<div class="block">
<p>媒体列表与数据列表几乎相同，但具有更多灵活的布局，用于可视化更多复杂的资料，如产品、服务、用户等</p>
</div>
<div class="block-title">歌曲</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">邮件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">带有中心箭头的图标</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">更加简洁的列表</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>