首页 » Framework7 » Framework7 列表(表格)
网站地图

联系人列表（Contacts List）

联系人列表用来展示个人的联系方式。

联系人列表是分组列表（Grouped Lists）的一个特殊的类型，主要有2点不同：

  • 列表区域元素（“list-block”）需要带上额外的“contacts-block”类

  • 页面内容元素（“page-content”）需要带上额外的“contacts-content”类

示例

  1. <div class="page-content contacts-content">
  2.   <div class="list-block contacts-block">
  3.     <div class="list-group">
  4.       <ul>
  5.         <li class="list-group-title">A</li>
  6.         <li>
  7.           <div class="item-content">
  8.             <div class="item-inner">
  9.               <div class="item-title">Aaron </div>
  10.             </div>
  11.           </div>
  12.         </li>
  13.         <li>
  14.           <div class="item-content">
  15.             <div class="item-inner">
  16.               <div class="item-title">Abbie</div>
  17.             </div>
  18.           </div>
  19.         </li>
  20.         <li>
  21.           <div class="item-content">
  22.             <div class="item-inner">
  23.               <div class="item-title">Adam</div>
  24.             </div>
  25.           </div>
  26.         </li>
  27.         <li>
  28.           <div class="item-content">
  29.             <div class="item-inner">
  30.               <div class="item-title">Adele</div>
  31.             </div>
  32.           </div>
  33.         </li>
  34.         <li>
  35.           <div class="item-content">
  36.             <div class="item-inner">
  37.               <div class="item-title">Agatha</div>
  38.             </div>
  39.           </div>
  40.         </li>
  41.         <li>
  42.           <div class="item-content">
  43.             <div class="item-inner">
  44.               <div class="item-title">Agnes</div>
  45.             </div>
  46.           </div>
  47.         </li>
  48.         <li>
  49.           <div class="item-content">
  50.             <div class="item-inner">
  51.               <div class="item-title">Albert</div>
  52.             </div>
  53.           </div>
  54.         </li>
  55.         <li>
  56.           <div class="item-content">
  57.             <div class="item-inner">
  58.               <div class="item-title">Alexander</div>
  59.             </div>
  60.           </div>
  61.         </li>
  62.       </ul>
  63.     </div>
  64.     <div class="list-group">
  65.       <ul>
  66.         <li class="list-group-title">B</li>
  67.         <li>
  68.           <div class="item-content">
  69.             <div class="item-inner">
  70.               <div class="item-title">Bailey</div>
  71.             </div>
  72.           </div>
  73.         </li>
  74.         <li>
  75.           <div class="item-content">
  76.             <div class="item-inner">
  77.               <div class="item-title">Barclay</div>
  78.             </div>
  79.           </div>
  80.         </li>
  81.         <li>
  82.           <div class="item-content">
  83.             <div class="item-inner">
  84.               <div class="item-title">Bartolo</div>
  85.             </div>
  86.           </div>
  87.         </li>
  88.         <li>
  89.           <div class="item-content">
  90.             <div class="item-inner">
  91.               <div class="item-title">Bellamy</div>
  92.             </div>
  93.           </div>
  94.         </li>
  95.         <li>
  96.           <div class="item-content">
  97.             <div class="item-inner">
  98.               <div class="item-title">Belle</div>
  99.             </div>
  100.           </div>
  101.         </li>
  102.         <li>
  103.           <div class="item-content">
  104.             <div class="item-inner">
  105.               <div class="item-title">Benjamin</div>
  106.             </div>
  107.           </div>
  108.         </li>
  109.       </ul>
  110.     </div>
  111.     <div class="list-group">
  112.       <ul>
  113.         <li class="list-group-title">C</li>
  114.         <li>
  115.           <div class="item-content">
  116.             <div class="item-inner">
  117.               <div class="item-title">Caiden</div>
  118.             </div>
  119.           </div>
  120.         </li>
  121.         <li>
  122.           <div class="item-content">
  123.             <div class="item-inner">
  124.               <div class="item-title">Calvin</div>
  125.             </div>
  126.           </div>
  127.         </li>
  128.         <li>
  129.           <div class="item-content">
  130.             <div class="item-inner">
  131.               <div class="item-title">Candy</div>
  132.             </div>
  133.           </div>
  134.         </li>
  135.         <li>
  136.           <div class="item-content">
  137.             <div class="item-inner">
  138.               <div class="item-title">Carl</div>
  139.             </div>
  140.           </div>
  141.         </li>
  142.         <li>
  143.           <div class="item-content">
  144.             <div class="item-inner">
  145.               <div class="item-title">Cherilyn</div>
  146.             </div>
  147.           </div>
  148.         </li>
  149.         <li>
  150.           <div class="item-content">
  151.             <div class="item-inner">
  152.               <div class="item-title">Chester</div>
  153.             </div>
  154.           </div>
  155.         </li>
  156.         <li>
  157.           <div class="item-content">
  158.             <div class="item-inner">
  159.               <div class="item-title">Chloe</div>
  160.             </div>
  161.           </div>
  162.         </li>
  163.       </ul>
  164.     </div>
  165.     <div class="list-group">
  166.       <ul>
  167.         <li class="list-group-title">V</li>
  168.         <li>
  169.           <div class="item-content">
  170.             <div class="item-inner">
  171.               <div class="item-title">Vladimir</div>
  172.             </div>
  173.           </div>
  174.         </li>
  175.       </ul>
  176.     </div>
  177.   </div>
  178. </div>

实例预览