Las barras de espectro se utilizan para representar el progreso de la tarea, el valor dentro del rango conocido. Las barras son componentes para mostrar HTML5 <progress> , <meter> y elementos de rango de entrada.
En Spectre Bars, tenemos barras predeterminadas y barras deslizantes, las Barras deslizantes de Spectre se utilizan para crear barras de progreso en el modo deslizante. Puede agregar la clase barra deslizante al contenedor Barras. Agregue elementos secundarios con la clase bar-item y agregue la clase bar-slider-btn para el botón dentro de div con la clase bar-item . También debe agregar el ancho del elemento de la barra manualmente para establecer el punto del control deslizante.
Tipos de barras Spectre:
- Barras predeterminadas de Spectre: Esto se usa para crear barras normales.
- Barras deslizantes de Spectre: se utilizan para crear barras de progreso en el modo deslizante.
Clases de barras Spectre:
- bar: esta clase se utiliza para crear barras predeterminadas y barras deslizantes.
- bar-slider: esta clase se utiliza para crear barras deslizantes.
Sintaxis:
<div class="bar bar-slider">
<div class="bar-item"
...
</div>
</div>
El siguiente ejemplo ilustra las barras Spectre.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
.bar {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Bars Class</strong>
</center>
<br>
<strong>Slider Bars:</strong>
<div class="bar">
<div class="bar-item" style="width:10%;">
</div>
<div class="bar-item" style="width:75%;">
</div>
</div>
<br>
<strong>Slider Bars:</strong>
<div class="bar">
<div class="bar-item" style="width:75%;">
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, crearemos barras deslizantes.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
.bar {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Slider bars Class</strong>
</center>
<br>
<strong>Range Slider Bars:</strong>
<div class="bar bar-slider">
<div class="bar-item" style="width:10%;">
<button class="bar-slider-btn btn">
<br>Minimum
</button>
</div>
<div class="bar-item" style="width:75%;">
<button class="bar-slider-btn btn">
<br>Maximum
</button>
</div>
</div>
<br>
<strong>Slider Bars:</strong>
<div class="bar bar-slider">
<div class="bar-item" style="width:75%;">
<button class="bar-slider-btn btn">
<br>75%
</button>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://picturepan2.github.io/spectre/components/bars.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA