Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
Las listas se utilizan para almacenar datos o información en las páginas web en forma ordenada o desordenada. El encabezado de la lista de categorías de componentes CSS de la interfaz de usuario de Onsen se utiliza para crear el encabezado en la lista mediante la clase de encabezado de lista .
Onsen UI CSS Componente Categoría Lista Encabezado Clase:
- list-header: esta clase se utiliza para crear el encabezado de la lista.
Sintaxis:
<ul class="list">
<li class="list-header">
...
</li>
...
</ul>
Ejemplo 1: El siguiente ejemplo muestra el encabezado de la lista de categorías de componentes CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Category List Header </strong> <br> <br> <ul class="list"> <li class="list-header"> This is Header </li> <li class="list-item"> <div class="list-item__center"> List item 1 </div> </li> </ul> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el encabezado de la lista de categorías de componentes CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Category List Header </strong> <br> <br> <ul class="list"> <li class="list-header list-header--material"> This is Material Header </li> <li class="list-item"> <div class="list-item__center"> List item 1 </div> </li> <li class="list-item"> <div class="list-item__center"> List item 2 </div> </li> </ul> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#list-category
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA