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.
El título de la lista de componentes CSS de la interfaz de usuario de Onsen se utiliza para dar un título a la lista. Podemos dar el título usando la clase list-title .
Título de la lista de componentes CSS de la interfaz de usuario de Onsen Clase:
- list-title: Esta clase se utiliza para dar el título de la lista.
Sintaxis:
<div class="list-title">
...
</div>
<ul class="list">
...
</ul>
Ejemplo 1: El siguiente ejemplo muestra el título Lista 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 List title </strong> <div class="list-title"> This is list Title </div> <ul class="list"> <li class="list-item"> GFG item 1 </li> <li class="list-item"> GFG item 2 </li> </ul> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el título Lista 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 List title </strong> <div class="list-title"> TITLE IS GEEKSFORGEEKS </div> <ul class="list"> <li class="list-item"> <div class="list-item__left"> <img class="list-item__thumbnail" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210318103632/gfg.png"> </div> <div class="list-item__center"> <div class="list-item__title"> GeeksforGeeks website </div> <div class="list-item__subtitle"> A Computer Science portal for geeks. </div> </div> </li> <li class="list-item"> <div class="list-item__left"> <img class="list-item__thumbnail" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"> </div> <div class="list-item__center"> <div class="list-item__title"> GFG </div> <div class="list-item__subtitle"> GeeksforGeeks </div> </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