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. La lista de materiales del componente CSS de la interfaz de usuario de Onsen se utiliza para crear la lista de materiales con los elementos de la lista utilizando las siguientes clases.
Clases de la lista de materiales del componente CSS de la interfaz de usuario de Onsen:
- list–material: esta clase se utiliza para crear la lista de materiales.
- list-item–material: esta clase se utiliza para crear el elemento de la lista de materiales.
- list-item–material__center: Esta clase se utiliza para crear el elemento de la lista de materiales en el centro.
- list-item–material__title: Esta clase se utiliza para crear el título del elemento de la lista de materiales.
- list-item–material__subtitle: esta clase se utiliza para crear el subtítulo del elemento de la lista de materiales.
Sintaxis:
<ul class="list list--material">
<li class="list-item list-item--material">
<div class="list-item__center
list-item--material__center">
<div class="list-item__title
list-item--material__title">
...
</div>
<div class="list-item__subtitle
list-item--material__subtitle">
...
</div>
</div>
</li>
...
</ul>
Ejemplo 1: El siguiente ejemplo demuestra la Lista de materiales del componente 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> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Material List </h3> <ul class="list list--material"> <li class="list-item list-item--material"> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GFG Material list item </div> </div> </li> <li class="list-item list-item--material"> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GeeksforGeeks </div> </div> </li> </ul> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la Lista de materiales del componente 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> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Material List </h3> <ul class="list list--material"> <li class="list-item list-item--material"> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GFG Material list item </div> <div class="list-item__subtitle list-item--material__subtitle"> A Computer Science portal for geeks. </div> </div> </li> <li class="list-item list-item--material"> <div class="list-item__center list-item--material__center"> <div class="list-item__title list-item--material__title"> GeeksforGeeks </div> <div class="list-item__subtitle list-item--material__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