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.
Las escalas de tiempo de la interfaz de usuario de Blaze se utilizan para ilustrar los eventos que ocurrieron de acuerdo con su terminología o lo que se debe planificar para que suceda. Líneas de tiempo de la interfaz de usuario de Blaze Los elementos alternativos se utilizan para crear los elementos alternativos en la línea de tiempo usando las siguientes clases.
Líneas de tiempo de la interfaz de usuario de Blaze Elementos alternativos Clases:
- o-timeline: esta clase se utiliza para crear la línea de tiempo.
- c-timeline-item: esta clase se utiliza para crear el elemento de la línea de tiempo.
- c-timeline-item__body: esta clase se utiliza para crear el cuerpo de la línea de tiempo.
- c-timeline-item–last: esta clase se utiliza para crear el último elemento de la línea de tiempo.
- o-timeline–alternate: esta clase se utiliza para crear la línea de tiempo con elementos alternativos.
- c-timeline-item–left: esta clase se usa para crear el elemento en el lado izquierdo.
- c-timeline-item–brand: esta clase se utiliza para cambiar el color del elemento de la línea de tiempo al color de la marca.
- c-timeline-item–info: esta clase se usa para cambiar el color del elemento de la línea de tiempo al color de información.
- c-timeline-item–warning: esta clase se utiliza para cambiar el color del elemento de la línea de tiempo al color de advertencia.
- c-timeline-item–success: esta clase se utiliza para cambiar el color del elemento de la línea de tiempo al color de éxito.
- c-timeline-item–error: esta clase se utiliza para cambiar el color del elemento de la línea de tiempo al color de error.
Sintaxis:
<ul class="o-timeline o-timeline--alternate">
...
<li class="c-timeline-item c-timeline-item--left">
<div class="c-timeline-item__body">
...
</div>
</li>
...
</ul>
Ejemplo 1: el siguiente ejemplo muestra los elementos alternativos de las líneas de tiempo de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Timelines Alternating items </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Timelines Alternating items </h3> </div> <ul class="o-timeline o-timeline--alternate"> <li class="c-timeline-item"> <div class="c-timeline-item__body"> GeeksforGeeks 1 </div> </li> <li class="c-timeline-item c-timeline-item--left"> <div class="c-timeline-item__body"> GeeksforGeeks item 2 </div> </li> <li class="c-timeline-item c-timeline-item--last"> <div class="c-timeline-item__body"> GeeksforGeeks item 3 </div> </li> </ul> </body> </html>
Producción:
Líneas de tiempo de la interfaz de usuario de Blaze Elementos alternativos
Ejemplo 2: el siguiente ejemplo muestra los elementos alternativos de las líneas de tiempo de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Timelines Alternating items </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body class="u-window-box-large"> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Timelines Alternating items </h3> </div> <ul class="o-timeline o-timeline--alternate o-timeline--loading"> <li class="c-timeline-item c-timeline-item--warning c-timeline-item--left"> <div class="c-timeline-item__body"> GeeksforGeeks 1 <p> A Computer Science portal for geeks. </p> </div> </li> <li class="c-timeline-item c-timeline-item--error"> <div class="c-timeline-item__body"> GeeksforGeeks item 2 </div> </li> <li class="c-timeline-item c-timeline-item--success c-timeline-item--left"> <div class="c-timeline-item__body"> GeeksforGeeks item 3 </div> </li> <li class="c-timeline-item c-timeline-item--info"> <div class="c-timeline-item__body"> GeeksforGeeks item 4 </div> </li> <li class="c-timeline-item c-timeline-item--last c-timeline-item--left"> <div class="c-timeline-item__body"> GeeksforGeeks item 5 <p class="u-text--quiet"> Portal for geeks. </p> </div> </li> <li class="c-timeline-item c-timeline-item--loading"> <div class="c-timeline-item__body"> .....Loading item 6 </div> </li> </ul> </body> </html>
Producción:
Líneas de tiempo de la interfaz de usuario de Blaze Elementos alternativos
Referencia: https://www.blazeui.com/components/timelines/
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA