En este artículo, aprenderemos cómo incluir listas utilizando la interfaz de usuario de Onsen. 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.
Sintaxis:
<element-name class="class-name">...</element-name>
Clases utilizadas:
- lista: esta clase se utiliza para una lista simple.
- list-item: esta clase se utiliza para crear un elemento en una lista.
- list-item__center: Esta clase se usa para crear la lista en el centro.
- list-item–expandable: esta clase se usa para crear una lista expandible.
- list-item__top: Esta clase se usa para crear la lista en la parte superior.
- list-item__right: Esta clase se usa para crear la lista en la posición correcta.
- list-item__left: Esta clase se usa para crear la lista en la posición izquierda.
- list-item__expand-chevron: esta clase se usa para crear una lista de chevron expandible.
- list-item__expandable-content: esta clase se usa para crear una lista de contenido expandible.
- list list–noborder: esta clase se utiliza para crear una lista sin bordes.
- list-header: esta clase se utiliza para crear un encabezado de lista.
- list-item–tappable: esta clase se usa para crear la lista que se puede tocar
- list–inset: esta clase se utiliza para crear la lista de inserción.
- list–inset__item: esta clase se utiliza para crear el elemento insertado.
- list-item__thumbnail: esta clase se utiliza para crear la lista de miniaturas.
- list-item–material: Esta clase se utiliza para crear la lista de materiales.
- list-item–material__center: Esta clase se utiliza para crear la lista de materiales en la posición central.
- list-item–material__left: Esta clase se usa para crear la lista de materiales en la posición izquierda.
- list-item–material__right: Esta clase se usa para crear la lista de materiales en la posición correcta.
- list-item–chevron: esta clase se utiliza para crear la lista de cheurones.
- list-item__label: esta clase se utiliza para crear la etiqueta de la lista.
- list-item–nodivider: esta clase se utiliza para crear la lista sin divisor.
- list-item–nodivider__center: Esta clase se usa para crear la lista sin divisores en la posición central.
- list-item–nodivider__left: esta clase se usa para crear la lista sin divisores en la posición izquierda.
- list-item–nodivider__right: esta clase se usa para crear la lista sin divisores en la posición correcta.
- list-item–longdivider: Esta clase se usa para crear la lista con un divisor largo.
- list-item–longdivider__center: Esta clase se usa para crear la lista divisoria larga en la posición central.
- list-item–longdivider__right: esta clase se usa para crear la lista de divisores largos en la posición correcta.
- list-item–longdivider__left: esta clase se usa para crear la lista divisoria larga en la posición izquierda.
- list-title: Esta clase se utiliza para crear el título de la lista.
- list-title–material: esta clase se utiliza para crear la lista de títulos de materiales.
Ejemplo 1: En el siguiente ejemplo, crearemos una lista simple.
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 </h3> <ul class="list"> <li class="list-item"> <div class="list-item__center">DSA</div> </li> <li class="list-item"> <div class="list-item__center">Java</div> </li> <li class="list-item"> <div class="list-item__center">C++</div> </li> </ul> </center> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, haremos uso de las clases anteriores para demostrar el uso para crear una lista.
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 </h3> <br> <br> <ul class="list"> <li class="list-header"> Header </li> <li class="list-item"> <div class="list-item__center">Item</div> </li> <li class="list-item"> <div class="list-item__center">Item</div> </li> <li class="list-item"> <div class="list-item__center">Item</div> </li> </ul> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#list-category