Framework7 - List Divider

Description

The list divider is a list element with title, which visually divide one list items from another.

Example

The following example demonstrates the use of list divider that divides list from other list with different items in Framework7 list view −

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Link Elements</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">List Divider</div>
                        <div class = "right"> </div>
                     </div>
                  </div>

                  <div class = "page-content">
                     <div class = "content-block-title">With Divider</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                              <div class = "item-inner">
                                 <div class = "item-title">Item title</div>
                                 <div class = "item-after">Label</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                              <div class = "item-inner">
                                 <div class = "item-title">Title</div>
                              </div>
                           </li>
                           
                           <li class = "item-divider">Title of the divider here</li>
                           
                           <li class = "item-content">
                              <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                              <div class = "item-inner">
                                 <div class = "item-title">Item with badge</div>
                                 <div class = "item-after"> <span class = "badge">78</span></div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-media"><i class = "icon icon-form-name"></i></div>
                              <div class = "item-inner">
                                 <div class = "item-title">Another item</div>
                                 <div class = "item-after">Another label</div>
                              </div>
                           </li>
                        </ul>
                        
                        <div class = "list-block-label">List block label text written here</div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as list_views_list_divider.html file in your server root folder.

  • Open this HTML file as http://localhost/list_views_list_divider.html and the output is displayed as shown below.

  • This code divides one list items from another list items.

framework7_list_views.htm
Advertisements