Blaze UI es una biblioteca de interfaz de usuario de código abierto que viene con muchos componentes que ayudan a reducir el tiempo de desarrollo del sitio web. Todos los componentes de Blaze UI son móviles y funcionan bien en dispositivos de todos los tamaños de pantalla. Todas las funciones de la interfaz de usuario de Blaze dependen de las funciones nativas del navegador en lugar de una biblioteca o un marco que facilita su uso.
En este artículo, veremos los atributos del contador de la interfaz de usuario de Blaze . El componente de contador se utiliza para mostrar un temporizador o una cuenta regresiva al usuario. También se puede utilizar para animar un número. El componente contador tiene seis atributos que se enumeran a continuación.
Atributos del contador de la interfaz de usuario de Blaze:
- inicio automático: este es un atributo booleano que define si el contador se iniciará automáticamente en la carga de la página o no.
- valor inicial: este atributo acepta un valor de tipo numérico que es el valor inicial del contador.
- end-value: este atributo acepta un valor de tipo numérico que es el valor inicial del contador.
- duración: Este atributo acepta un valor de tipo numérico que es el número de segundos que tardará el contador en pasar del valor inicial al valor final.
- retardo: este atributo también acepta valor de tipo numérico, que es el número de milisegundos que el contador esperará antes de comenzar.
- decimales: Este atributo acepta un valor de tipo numérico que es el número de dígitos a mostrar después del decimal.
Sintaxis:
<blaze-counter class="u-super" auto-start start-value="0" end-value="20" duration="20" decimals="2" delay="1000"> </blaze-counter>
Ejemplo 1: Este ejemplo muestra el uso de atributos de contador para mostrar un contador que va de 0 a 100 en 5 segundos.
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 - Counter Attributes</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Counter Attributes - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-counter
class="u-super"
auto-start
start-value="0"
end-value="100"
duration="5"
decimals="2"
delay="1000">
</blaze-counter>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo muestra un contador inverso que va de 500 a 0 en 7 segundos.
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 - Counter Attributes</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Counter Attributes - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-counter
class="u-super"
auto-start
start-value="500"
end-value="0"
duration="7"
decimals="2"
delay="1000">
</blaze-counter>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/counter/
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA