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. En este artículo, veremos la lista sin bordes del componente CSS utilizando la interfaz de usuario de Onsen.
La Lista sin bordes se puede utilizar para crear la lista sin ningún borde. Para crear la lista Sin bordes, usaremos la clase modificadora list–noborder .
Onsen UI CSS Component Noborder Lista de clases:
- list–noborder: Esta clase se utiliza para crear la lista sin borde.
- list-item : Esta clase se utiliza para agregar los diferentes elementos a la lista.
- list-item__center : esta clase se utiliza para centrar la lista de elementos que contiene.
Sintaxis:
<ul class="list list--noborder">
<li class="list-item">
<div class="list-item__center">
...
</div>
</li>
...
</ul>
Ejemplo 1: El siguiente ejemplo demuestra la lista sin bordes del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <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 Noborder List </h3> <ul class="list list--noborder"> <li class="list-item"> <div class="list-item__center"> GFG item 1 </div> </li> <li class="list-item"> <div class="list-item__center"> GFG item 2 </div> </li> <li class="list-item"> <div class="list-item__center"> GFG item 3 </div> </li> </ul> </center> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo muestra la lista sin bordes del componente CSS de la interfaz de usuario de Onsen que contiene la imagen del logotipo.
HTML
<!DOCTYPE html> <html> <head> <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 Noborder List </h3> <ul class="list list--noborder"> <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