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 táctil del componente CSS de la interfaz de usuario de Onsen se usa para crear los elementos de la lista que se pueden tocar usando la clase list-item-tapable .
Onsen UI CSS Component Clase de lista táctil:
- list-item–tappable: esta clase se usa para crear los elementos de la lista que se pueden tocar.
Sintaxis:
<ul class="list">
<li class="list-item
list-item--tappable">
<div class="list-item__center">
...
</div>
</li>
...
</ul>
Ejemplo 1: El siguiente ejemplo muestra la lista de elementos táctiles 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 Tappable List </h3> <ul class="list"> <li class="list-item list-item--tappable"> <div class="list-item__center"> Java </div> </li> <li class="list-item list-item--tappable"> <div class="list-item__center"> Python </div> </li> </ul> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la lista de elementos táctiles 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 Tappable List </h3> <ul class="list"> <li class="list-item list-item--tappable"> <div class="list-item__center"> <div class="list-item__title"> Java </div> </div> <div class="list-item__right"> <i class="ion-ios-calendar list-item__icon"> </i> </div> </li> <li class="list-item list-item--tappable"> <div class="list-item__center"> <div class="list-item__title"> Python </div> </div> <div class="list-item__right"> <i class="ion-ios-star list-item__icon"> </i> </div> </li> <li class="list-item list-item--tappable"> <div class="list-item__center"> <div class="list-item__title"> C++ </div> </div> <div class="list-item__right"> <i class="ion-ios-menu list-item__icon"> </i> </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 gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA