Onsen UI es un marco HTML5 innovador y práctico que está disponible de forma gratuita para su uso. Simplifica el desarrollo de la interfaz de usuario para que los desarrolladores de aplicaciones puedan centrarse en la funcionalidad del software. Con una gran selección de elementos de interfaz de usuario premium creados exclusivamente para aplicaciones móviles y repletos de funciones que siguen los estándares de diseño nativos de iOS y Android, la interfaz de usuario de Onsen es un recurso excelente. La interfaz de usuario de Onsen está diseñada para funcionar con AngularJS, sin embargo, también se puede usar con jQuery o cualquier otro marco. El marco JavaScript de la interfaz de usuario de Onsen se creó con PhoneGap y Cordova.
Componentes CSS para desarrolladores.
La Lista básica es un componente versátil y poderoso que puede usarse para mostrar una sucesión de artículos. Una lista desordenada con elementos de lista y las clases apropiadas es la lista básica más simple.
Onsen UI CSS Component Clases de lista básica:
- list: esta clase se agrega a un elemento de lista desordenado para convertirlo en un componente de lista.
- list-item: esta clase se agrega a un elemento de lista para especificar los elementos de la lista.
- list-item__center: esta clase se agrega a los elementos de la lista para que esté centrada verticalmente de modo que tenga el mismo relleno en la parte superior e inferior.
Sintaxis:
<ul class="list">
<li class="list-item">
<div class="list-item__center">. . .</div>
</li>
</ul>
Ejemplo 1: El siguiente código demuestra la creación de una lista básica utilizando las listas anteriores.
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"> <link href= "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> </head> <body> <div style="margin:2rem; font-family:Roboto, sans-serif;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component List </h3><br/> </div> <div style="margin-left:4rem; font-family:Roboto, sans-serif; width:15rem;"> <ul class="list"> <li class="list-item"> <div class="list-item__center"> DSA </div> </li> <li class="list-item"> <div class="list-item__center"> Algorithms </div> </li> <li class="list-item"> <div class="list-item__center"> Competetive Programming </div> </li> </ul> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra la creación de una lista con iconos agregados a la lista de elementos.
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"> <link href= "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> </head> <body> <div style="margin:2rem; font-family:Roboto,sans-serif;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component List </h3><br/> </div> <div style="margin-left:4rem; font-family:Roboto,sans-serif; width:18rem;"> <ul class="list"> <li class="list-item"> <div class="list-item__center"> <i class="tabbar__icon ion-ios-reorder" style="margin-right:1rem"> </i> DSA </div> </li> <li class="list-item"> <div class="list-item__center"> <i class="tabbar__icon ion-ios-bulb" style="margin-right:1rem"> </i> Algorithms </div> </li> <li class="list-item"> <div class="list-item__center"> <i class="tabbar__icon ion-ios-hourglass" style="margin-right:1rem"> </i> Competetive Programming </div> </li> </ul> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#list-category
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA