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 elemento de la lista de componentes CSS de la interfaz de usuario de Onsen con miniatura se utiliza para agregar una miniatura junto con el elemento de la lista mediante la clase list-item__thumbnail . Las miniaturas son imágenes de tamaño reducido que se pueden usar con el elemento de la lista.
Elemento de la lista de componentes CSS de la interfaz de usuario de Onsen con clase de miniatura:
- list-item__thumbnail: esta clase se usa para agregar la miniatura al elemento de la lista.
Sintaxis:
<ul class="list">
<li class="list-item">
<div class="list-item__left">
<img class="list-item__thumbnail"
src="...">
</div>
<div class="list-item__center">
<div class="list-item__title">
...
</div>
</div>
</li>
</ul>
Ejemplo 1: el siguiente ejemplo muestra el elemento de lista de componentes CSS de la interfaz de usuario de Onsen con miniatura.
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 Item with Thumbnail </strong> <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"> GFG </div> <div class="list-item__subtitle"> GeeksforGeeks </div> </div> </li> </ul> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el elemento de lista de componentes CSS de la interfaz de usuario de Onsen con miniatura.
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 Item with Thumbnail </strong> <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> <li class="list-item"> <div class="list-item__left"> <img class="list-item__thumbnail" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> </div> <div class="list-item__center"> <div class="list-item__title"> GeeksforGeeks image </div> <div class="list-item__subtitle"> portal for geeks </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