Mobile Android and IOS Development Framework Framework7 Tutorial - Media List View

A multimedia list is an extension of the list view, which is used to display more complex data such as products, services, users, etc.

Of course, its layout is more complex:

1. <!-- Media list has additional "media-list" class -->
2. <divclass="list-block media-list"> 
3.     <ul>
4.         <li>
5.             <divclass="item-content"> 
6.                 <divclass="item-media"> 
7.                     <imgsrc="path/to/img.jpg"> 
8.                 </div>
9.                 <divclass="item-inner"> 
10.                     <divclass="item-title-row"> 
11.                         <divclass="item-title">Element title</div> 
12.                         <divclass="item-after">Element label</div> 
13.                     </div>
14.                     <divclass="item-subtitle">Subtitle</div> 
15.                     <divclass="item-text">Additional description text</div> 
16.                 </div>
17.             </div>
18.         </li>
19.     </ul>
20. </div>

copy

in:

• item-mediaand item-innerthe main flex container. Required element.

• item-media - Container for media elements such as icons, images, etc.  Optional elements.

• item-inner -  item-titleand item-afterthe main flex container. Required element.

• item-title-row -  item-title and  item-afterthe main flex container. Required element.

• item-title - One-line list item title. optional element.

• item-after - List item labels. Can contain any additional html elements (such as label text, badges, switch/toggle, buttons, etc.). optional element.

• item-subtitle - Extra one-line header. optional element.

• item-text - An additional two-line layout container for detailed descriptions. optional element.

Example

1. <divclass="content-block-title">Songs</div> 
2. <divclass="list-block media-list"> 
3.   <ul>
4.     <li>
5.       <ahref="#"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>

复制

实例预览