Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene excelentes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI nos brinda la función de agregar un contador al sitio web, básicamente, el contador es una variable utilizada para indicar cuentas o una cifra numérica conectada a cualquier dato, y puede ser incremental o decreciente. Cuando queremos mostrar un número con un poco más de estilo de lo habitual, usamos Blaze UI Counter.
- Atributos de contador de Blaze UI : los atributos de contador se utilizan para definir el comportamiento del contador. El componente contador tiene seis atributos.
- Métodos de contador de Blaze UI : los métodos de contador se utilizan para activar la funcionalidad de contador
- Eventos de contador de Blaze UI : los eventos de contador son útiles, solo hay un evento de contador.
- Etiqueta de contador de Blaze UI: la etiqueta de contador se usa para agregar el contador de Blaze UI.
Sintaxis:
<blaze-counter
auto-start
start-value="..."
end-value="..."
duration="..."
decimals="..."
delay="...">
</blaze-counter>
Ejemplo 1: el siguiente código muestra el contador de la interfaz de usuario de Blaze con la etiqueta del contador de la interfaz de usuario de Blaze .
HTML
<!DOCTYPE html> <html> <head> <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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h2>Blaze UI Incremental Counter</h2> <blaze-counter auto-start start-value="0" end-value="100" duration="7" decimals="1" delay="1500"> </blaze-counter> </body> </html>
Producción:
contador 0-100
Ejemplo 2: el siguiente código muestra el contador decreciente de la interfaz de usuario de Blaze mediante la etiqueta de contador de la interfaz de usuario de Blaze .
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<link rel="stylesheet"
href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Blaze UI Decremental Counter</h2>
<blaze-counter
auto-start
start-value="100"
end-value="0"
duration="7"
decimals="1"
delay="1500">
</blaze-counter>
</body>
</html>
Producción:
100-0
Referencia: https://www.blazeui.com/components/counter/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA