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.
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. Blaze UI Timelines Standard se usa para crear la línea de tiempo estándar usando las siguientes clases de línea de tiempo.
Clases estándar de Blaze UI Timelines:
- 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.
Sintaxis:
<ul class="o-timeline">
<li class="c-timeline-item">
<div class="c-timeline-item__body">
...
</div>
</li>
...
</ul>
Ejemplo 1: El siguiente ejemplo demuestra el estándar de líneas de tiempo de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Timelines Standard </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 Standard </h3> </div> <ul class="o-timeline"> <li class="c-timeline-item"> <div class="c-timeline-item__body"> GeeksforGeeks item 1 </div> </li> <li class="c-timeline-item c-timeline-item--last"> <div class="c-timeline-item__body"> GeeksforGeeks item 2 </div> </li> </ul> </body> </html>
Producción:
Estándar de líneas de tiempo de la interfaz de usuario de Blaze
Ejemplo 2: El siguiente ejemplo demuestra el estándar de líneas de tiempo de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Timelines Standard </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 Standard </h3> </div> <ul class="o-timeline"> <li class="c-timeline-item"> <div class="c-timeline-item__body"> GeeksforGeeks 1 <p> A Computer Science portal for geeks. </p> </div> </li> <li class="c-timeline-item"> <div class="c-timeline-item__body"> GeeksforGeeks item 2 <p class="u-text--quiet"> Portal for geeks. </p> </div> </li> <li class="c-timeline-item"> <div class="c-timeline-item__body"> GeeksforGeeks item 3 </div> </li> <li class="c-timeline-item c-timeline-item--last"> <div class="c-timeline-item__body"> GeeksforGeeks item 4 </div> </li> </ul> </body> </html>
Producción:
Estándar de líneas de tiempo de la interfaz de usuario de Blaze
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