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

多媒体列表（Media List View）

多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。

当然，它的布局更为复杂：

  1. <!-- 多媒体列表有额外的“media-list”类 -->
  2. <div class="list-block media-list">
  3.     <ul>
  4.         <li>
  5.             <div class="item-content">
  6.                 <div class="item-media">
  7.                     <img src="path/to/img.jpg">
  8.                 </div>
  9.                 <div class="item-inner">
  10.                     <div class="item-title-row">
  11.                         <div class="item-title">Element title</div>
  12.                         <div class="item-after">Element label</div>
  13.                     </div>
  14.                     <div class="item-subtitle">Subtitle</div>
  15.                     <div class="item-text">Additional description text</div>
  16.                 </div>
  17.             </div>
  18.         </li>
  19.     </ul>
  20. </div>

其中：

  • item-media和item-inner的主要弹性(flex)容器。必选元素。

    • item-media - 媒体元素（如图标，图片等）的容器. 可选元素.

    • item-inner - item-title和item-after的主要弹性(flex)容器。必选元素。

      • item-title-row - item-title 和 item-after的主要弹性(flex)容器。必选元素。

        • item-title - 单行列表项目标题。可选元素。

        • item-after - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。可选元素。

      • item-subtitle - 额外的单行标题。可选元素。

      • item-text - 额外的两行布局的容器，用来放置细节描述。可选元素。

示例

  1. <div class="content-block-title">Songs</div>
  2. <div class="list-block media-list">
  3.   <ul>
  4.     <li>
  5.       <a href="#" class="item-link item-content">
  6.         <div class="item-media"><img src="..." width="80"></div>
  7.         <div class="item-inner">
  8.           <div class="item-title-row">
  9.             <div class="item-title">Yellow Submarine</div>
  10.             <div class="item-after">$15</div>
  11.           </div>
  12.           <div class="item-subtitle">Beatles</div>
  13.           <div class="item-text">Lorem ipsum dolor sit amet...</div>
  14.         </div>
  15.       </a>
  16.     </li>
  17.     ...
  18.   </ul>
  19. </div>
  20. <div class="content-block-title">Mail App</div>
  21. <div class="list-block media-list">
  22.   <ul>
  23.     <li>
  24.       <a href="#" class="item-link item-content">
  25.         <div class="item-inner">
  26.           <div class="item-title-row">
  27.             <div class="item-title">Facebook</div>
  28.             <div class="item-after">17:14</div>
  29.           </div>
  30.           <div class="item-subtitle">New messages from John Doe</div>
  31.           <div class="item-text">Lorem ipsum dolor sit amet...</div>
  32.         </div>
  33.       </a>
  34.     </li>
  35.     ...
  36.   </ul>
  37. </div>
  38. <div class="content-block-title">Something more simple</div>
  39. <div class="list-block media-list">
  40.   <ul>
  41.     <li>
  42.       <div class="item-content">
  43.         <div class="item-media"><img src="..." width="44"></div>
  44.         <div class="item-inner">
  45.           <div class="item-title-row">
  46.             <div class="item-title">Yellow Submarine</div>
  47.           </div>
  48.           <div class="item-subtitle">Beatles</div>
  49.         </div>
  50.       </div>
  51.     </li>
  52.     ...
  53.   </ul>
  54. </div>
  55. <div class="content-block-title">Inset</div>
  56. <div class="list-block media-list inset">
  57.   <ul>
  58.     <li>
  59.       <a href="#" class="item-link item-content">
  60.         <div class="item-media"><img src="..." width="44"></div>
  61.         <div class="item-inner">
  62.           <div class="item-title-row">
  63.             <div class="item-title">Yellow Submarine</div>
  64.           </div>
  65.           <div class="item-subtitle">Beatles</div>
  66.         </div>
  67.       </a>
  68.     </li>
  69.     ...
  70.   </ul>
  71. </div>

实例预览