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 La carga del último elemento se utiliza para crear la línea de tiempo cargando el último elemento mediante la clase c-timeline-item–loading .
Líneas de tiempo de la interfaz de usuario de Blaze Cargando el último elemento 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–loading: esta clase se utiliza para crear la línea de tiempo de carga.
- c-timeline-item–loading: esta clase se utiliza para crear el último elemento con un estado de carga.
Sintaxis:
<ul class="o-timeline">
<li class="c-timeline-item
c-timeline-item--loading">
<div class="c-timeline-item__body">
...
</div>
</li>
...
</ul>
Ejemplo 1: el siguiente ejemplo muestra las líneas de tiempo de la interfaz de usuario de Blaze Cargando el último elemento.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Timelines Loading last item </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 Loading last item </h3> </div> <ul class="o-timeline o-timeline--loading"> <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> <li class="c-timeline-item c-timeline-item--loading"> <div class="c-timeline-item__body"> ...Loading Item 3 </div> </li> </ul> </body> </html>
Producción:
Líneas de tiempo de la interfaz de usuario de Blaze Cargando el último elemento
Ejemplo 2: el siguiente ejemplo muestra las líneas de tiempo de la interfaz de usuario de Blaze Cargando el último elemento.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Timelines Loading last item </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 Loading last item </h3> </div> <ul class="o-timeline o-timeline--loading"> <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 </div> </li> <li class="c-timeline-item c-timeline-item--last "> <div class="c-timeline-item__body"> GeeksforGeeks item 3 <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 4 </div> </li> </ul> </body> </html>
Producción:
Líneas de tiempo de la interfaz de usuario de Blaze Cargando el último elemento
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