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 mantenible. 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 ordenadas de Blaze UI . Blaze UI Lists Ordered se usa para proporcionar numeración a la lista.
Listas Clase Ordenada:
- c-list–ordered: esta clase se utiliza para proporcionar numeración decimal a los elementos presentes en la lista.
Sintaxis:
<ol class="c-list c-list--ordered">
<li class="c-list__item">List Item</li>
</ol>
Ejemplo 1: En este ejemplo, simplemente crearemos una lista ordenada.
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 List Ordered</h3> <ol 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> </ol> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, crearemos una lista ordenada anidada
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 List Ordered</h3> <ol class="c-list c-list--ordered" > <li class="c-list__item" >Fruits <ol class="c-list c-list--ordered"> <li class="c-list__item">Mango</li> <li class="c-list__item">Banana</li> <li class="c-list__item">Orange</li> <li class="c-list__item">Apple</li> </ol> </li> <li class="c-list__item">Vegetables <ol class="c-list c-list--ordered"> <li class="c-list__item">Potato</li> <li class="c-list__item">Tomato</li> <li class="c-list__item">Ladyfinger</li> <li class="c-list__item">Onion</li> </ol> </li> </ol> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/lists/
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA