Blaze UI es un kit de herramientas de interfaz de usuario gratuito y de código abierto que proporciona una base sólida para crear sitios web escalables y fáciles de mantener. Todos sus componentes se desarrollan primero para dispositivos móviles y son totalmente receptivos, lo que funciona en dispositivos de cualquier tamaño de pantalla.
En este artículo, veremos los colores de las líneas de tiempo de la interfaz de usuario de Blaze . Hay cinco clases que se utilizan para cambiar el color del elemento de la línea de tiempo. Esas clases se enumeran a continuación.
Blaze UI Timelines Colors Clases:
- 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:
<blaze-timeline-item type="info">
...
</blaze-timeline-item>
Ejemplo 1: este ejemplo muestra cómo usar las clases de color de la línea de tiempo para cambiar el color del elemento de la 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>Blaze UI - Timeline Colors</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
}
.wrapper{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="u-centered">
<h3 style="color:green;">GeeksforGeeks</h3>
<p><b>Timeline Colors - Blaze UI</b></p>
</div>
<div class="wrapper u-window-box-super">
<ul class="o-timeline">
<li class="c-timeline-item">
<div class="c-timeline-item__body">Learn Basic Syntax
<p class="c-paragraph u-small">
Syntax are the rules to write a programming language.
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--warning">
<div class="c-timeline-item__body">Learn Loops
<p class="c-paragraph u-small">
Learn about while, do-while, for-loops etc.
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--brand">
<div class="c-timeline-item__body">
Learn Data Structures
<p class="c-paragraph u-small">
Learn Linked List, Tree, Graph etc.
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--info">
<div class="c-timeline-item__body">
Learn Basic Algorithms
</div>
</li>
<li class="c-timeline-item c-timeline-item--error">
<div class="c-timeline-item__body">Build Projects
<p class="c-paragraph u-small">
Projects are very important.
They help you to brush up on your skills
</p>
</div>
</li>
<li class="c-timeline-item c-timeline-item--success
c-timeline-item--last">
<div class="c-timeline-item__body">
Start looking for a job
<p class="c-paragraph u-small">
Good luck for your bright future.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo muestra el uso de clases de color de la línea de tiempo con la variación alternativa de los elementos de la 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>Blaze UI - Timeline Colors</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Timeline Colors - Blaze UI</h3>
</div>
<div class="wrapper u-window-box-super">
<ul class="o-timeline o-timeline--alternate">
<li class="c-timeline-item">
<div class="c-timeline-item__body">
Learn Basic Syntax
</div>
</li>
<li class="c-timeline-item
c-timeline-item--brand c-timeline-item--left">
<div class="c-timeline-item__body">
Learn Loops
</div>
</li>
<li class="c-timeline-item c-timeline-item--info">
<div class="c-timeline-item__body">
Learn Data Structures
</div>
</li>
<li class=
"c-timeline-item c-timeline-item--warning
c-timeline-item--left">
<div class="c-timeline-item__body">
Learn Basic Algorithms
</div>
</li>
<li class="c-timeline-item c-timeline-item--success">
<div class="c-timeline-item__body">
Build Projects
</div>
</li>
<li class="c-timeline-item c-timeline-item--error
c-timeline-item--last c-timeline-item--left">
<div class="c-timeline-item__body">
Start looking for a job
</div>
</li>
</ul>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/timelines/
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA