Blaze UI es una biblioteca de interfaz de usuario basada en CSS que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. En este artículo, aprenderemos sobre el componente en línea Blaze UI Lists . Este componente se usa para hacer que los elementos de su lista fluyan de izquierda a derecha, en lugar de aparecer de arriba a abajo.
La interfaz de usuario de Blaze enumera la clase utilizada en línea:
- list–inline: esta clase actuará como un modificador para hacer que los elementos de la lista estén en una sola línea.
Sintaxis:
<ul class="c-list c-list--inline">
<li class="c-list__item">List-Item</li>
</ul>
Los siguientes ejemplos demostrarán este componente.
Ejemplo 1: en este ejemplo, la lista desordenada es una lista 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 Inline</h3> <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> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, la lista en línea desordenada está anidada dentro de 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 Lists Inline</h3> <ol> <li>Fruits</li> <ul class="c-list c-list--inline"> <li class="c-list__item">Orange</li> <li class="c-list__item">Banana</li> <li class="c-list__item">Apple</li> </ul> <li>Vegetables</li> <ul class="c-list c-list--inline"> <li class="c-list__item">Ladyfinger</li> <li class="c-list__item">Tomato</li> <li class="c-list__item">Potato</li> </ul> <li>Colours</li> <ul class="c-list c-list--inline"> <li class="c-list__item">Red</li> <li class="c-list__item">Green</li> <li class="c-list__item">Yellow</li> </ul> <li>City</li> <ul class="c-list c-list--inline"> <li class="c-list__item">Delhi</li> <li class="c-list__item">Moradabad</li> <li class="c-list__item">Lucknow</li> </ul> </ol> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/lists/#inline
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA