联系人列表
联系人列表用于显示个人联系人列表。
联系人列表是一个特殊的分组的列表视图，有一个区别。
唯一的差异是我们需要在列表视图元素（<div class="list">）中添加 contacts-list 类
CSS 变量
下方是相关 CSS 变量（CSS 自定义属性）的列表。
.ios {
--f7-contacts-list-title-font-size: inherit;
--f7-contacts-list-title-font-weight: 600;
--f7-contacts-list-title-height: 22px;
--f7-contacts-list-title-text-color: #000;
--f7-contacts-list-title-bg-color: #f7f7f7;
}
.ios .dark,
.ios.dark {
--f7-contacts-list-title-text-color: #fff;
--f7-contacts-list-title-bg-color: #323234;
}
.md {
--f7-contacts-list-title-font-size: 20px;
--f7-contacts-list-title-font-weight: 500;
--f7-contacts-list-title-height: 48px;
--f7-contacts-list-title-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
--f7-contacts-list-title-text-color: var(--f7-theme-color);
}
示例
contacts-list.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Contacts List</div>
</div>
</div>
<div class="page-content">
<div class="list list-strong-ios contacts-list">
<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>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Adele</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Agatha</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Agnes</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Albert</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Alexander</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>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Bellamy</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Belle</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Benjamin</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>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Carl</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Cherilyn</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Chester</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Chloe</div>
</div>
</div>
</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">V</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Vladimir</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>