Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos.
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. Proporciona una configuración fácil para crear una línea de tiempo sin ningún CSS adicional. También podemos aplicar diferentes colores a la línea de tiempo.
Atributos de las líneas de tiempo de la interfaz de usuario de Blaze:
- Cronología:
- alternativo : este campo toma un valor booleano y, si se establece en verdadero, la línea del elemento tiene un estilo central.
- cargando : este campo toma un valor booleano y, si se establece en verdadero, el elemento con la carga establecida en verdadero ocupa la última posición.
- Elemento de la línea de tiempo:
- último : este campo toma un valor booleano y, si se establece en verdadero para un elemento, el elemento ocupa la última posición.
- cargando : este campo toma un valor booleano y, si se establece en verdadero para un elemento, el elemento tiene un estilo diferente para indicar que el elemento no está cargado.
Sintaxis : cree una línea de tiempo en la interfaz de usuario de Blaze de la siguiente manera:
<blaze-timeline>
<blaze-timeline-item type="brand">
<!-- Content -->
</blaze-timeline-item>
<!-- More Items -->
</blaze-timeline>
Ejemplo 1: En el siguiente ejemplo, tenemos algunos elementos en una línea de tiempo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding: 1em;"> <center> <div> <h1 style="color: green;">GeeksforGeeks</h1> </div> <strong>Blaze UI Timelines Attributes</strong> <br/> <br/> <p>Welcome to GeeksforGeeks</p> </center> <blaze-timeline loading> <blaze-timeline-item type="brand"> Learn basic HTML, CSS </blaze-timeline-item> <blaze-timeline-item type="info"> Learn Javascript </blaze-timeline-item> <blaze-timeline-item type="success"> Create a portfolio website with HTML,CSS and Javascript </blaze-timeline-item> <blaze-timeline-item type="warning"> Learn a frontend framework like ReactJs, Vue.js, etc. </blaze-timeline-item> <blaze-timeline-item type="error"> Learn a backend language like Node.Js, PHP, etc. </blaze-timeline-item> <blaze-timeline-item last> Project: Create a full stack application like Shopping Website or Schedule Manager, etc. </blaze-timeline-item> <blaze-timeline-item loading> Continue Practicing </blaze-timeline-item> </blaze-timeline> </div> <script></script> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, tendremos una línea de tiempo con elementos alternativos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding: 1em;"> <center> <div> <h1 style="color: green;">GeeksforGeeks</h1> </div> <strong>Blaze UI Timelines Attributes</strong> <br /> <br /> <p>Welcome to GeeksforGeeks</p> </center> <blaze-timeline alternate> <blaze-timeline-item type="success" left> Item 1 </blaze-timeline-item> <blaze-timeline-item type="success"> Item 2 </blaze-timeline-item> <blaze-timeline-item type="success" left> Item 3 </blaze-timeline-item> <blaze-timeline-item type="success"> Item 4 </blaze-timeline-item> <blaze-timeline-item type="success" left> Item 5 </blaze-timeline-item> <blaze-timeline-item type="success"> Item 6 </blaze-timeline-item> <blaze-timeline-item type="success" left> Item 7 </blaze-timeline-item> <blaze-timeline-item type="success"> Item 8 </blaze-timeline-item> <blaze-timeline-item type="success" left> Item 9 </blaze-timeline-item> <blaze-timeline-item type="success" last> Item 10 </blaze-timeline-item> </blaze-timeline> </div> <script></script> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/timelines/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA