Framework7 - Bloque de lista

Descripción

El bloque de lista es su contenedor de elementos de vista de lista, que usa la clase de bloque de lista . Es casi similar al bloque de contenido, pero para los elementos de la lista. Todos los elementos de la vista de lista deben estar envueltos con el elemento de bloque de lista como se muestra a continuación:

<div class = "list-block">
   <ul>
      ... list elements here ...
   </ul>
</div>

Etiqueta de bloque de lista

La etiqueta del bloque de lista se puede agregar al final del bloque de lista como se muestra a continuación:

<div class = "list-block">
   <ul>
      ... list elements here ...
   </ul>
   <div class = "list-block-label">List block label text</div>
</div>

Elemento / elemento de lista

A continuación se muestra un diseño flexible de elemento de lista única:

<li>
   <div class = "item-content">  <!-- It is Required and is the main flex wrapper. -->
      <div class = "item-media"> <!-- Is optional element and is the container for media elements. -->
         <i class = "icon my-icon"></i>
      </div>
      
      <div class = "item-inner"> <!-- It is Required and is the main flex wrapper for item-title and item-after. -->
         <div class = "item-title"> <!-- Required and is a single-line list item title -->
            List element title
         </div>
         
         <div class = "item-after"> <!-- List item label. Can contain label text, badge, switch or button, etc.-->
            List element label
         </div>
         
      </div>
   </div>
</li>

Ejemplo

El siguiente ejemplo especifica el contenedor de elementos de la vista de lista utilizando el bloque de lista en Framework7:

<!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>Swipe Panel</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 View</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block-title">Full Layout</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">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 is written here</div>
                     </div>
                     
                     <div class = "content-block-title">Only titles</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item title</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Item with badge</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Another item</div>
                              </div>
                           </li>
                        </ul>
                     </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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código HTML proporcionado anteriormente como list_views_list_block.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/list_views_list_block.html y la salida se muestra como se muestra a continuación.
El ejemplo muestra el contenedor de elementos de vista de lista para elementos de lista, que se parece al bloque de contenido.

↰ Previous page