Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, aprenderemos sobre las listas de interfaz de usuario de Blazer. Admite listas ordenadas, desordenadas, sin estilo y en línea.
La interfaz de usuario de Blaze enumera las clases:
- c-list–ordered: esta clase se utiliza para crear una lista ordenada y proporcionar numeración decimal a los elementos presentes en la lista.
<ol class="c-list c-list--ordered">
<li class="c-list__item">...</li>
...
</ol>
- c-list: esta clase se utiliza para crear una lista desordenada y proporcionar viñetas a los elementos de la lista.
<ul class="c-list "> <li class="c-list__item">...</li> ... </ul>
- c-list–sin estilo: esta clase se usará para crear una lista sin estilo que establezca el estilo de lista en ninguno.
<list-type class="c-list c-list--unstyled">
<li class="c-list__item"> ...</li>
...
</list-type>
- c-list–inline: esta clase actuará como un modificador para crear elementos de lista en una sola línea.
<ul class="c-list c-list--inline"> <li class="c-list__item">...</li> ... </ul>
Ejemplo 1: En este ejemplo, aprenderemos sobre listas ordenadas y desordenadas.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3> Blaze UI Lists </h3> <p> I am Unordered list</p> <ul class="c-list "> <li class="c-list__item">Geeks</li> <li class="c-list__item">For</li> <li class="c-list__item">Geeks</li> </ul> <p> I am Ordered List</p> <ul class="c-list c-list--ordered"> <li class="c-list__item">Geeks</li> <li class="c-list__item">For</li> <li class="c-list__item">Geeks</li> </ul> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, aprenderemos sobre la lista sin estilo y en línea.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3> Blaze UI Lists </h3> <p> I am Inline list</p> <ul class="c-list c-list--inline"> <li class="c-list__item">Geeks</li> <li class="c-list__item">For</li> <li class="c-list__item">Geeks</li> </ul> <p> I am unstyled list</p> <ul class="c-list c-list--unstyled"> <li class="c-list__item">Geeks</li> <li class="c-list__item">For</li> <li class="c-list__item">Geeks</li> </ul> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/lists/
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA