Contacts List
Contacts lists intended to display list of personal people contacts.
Contacts list is a particular case of grouped List View with one difference.
The only difference is what we need to add additional contacts-list
class to the list view element (<div class="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 .theme-dark,
:root.theme-dark {
--f7-contacts-list-title-text-color: #fff;
}
.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 .theme-dark,
.ios.theme-dark {
--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-text-color: var(--f7-theme-color);
*/
--f7-contacts-list-title-height: 48px;
--f7-contacts-list-title-bg-color: transparent;
}
.aurora {
--f7-contacts-list-title-font-weight: 600;
--f7-contacts-list-title-text-color: #000;
/*
--f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
--f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
--f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
--f7-contacts-list-title-height: var(--f7-list-group-title-height);
*/
}
Example
<div class="page-content">
<div class="list 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>