Blaze UI es un kit de herramientas de interfaz de usuario de CSS ligero de código abierto 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.
Blaze UI Counter se usa para mostrar un número que actúa como contador. Podemos ponerle un contador de cuenta atrás o un cronómetro según nuestras necesidades. Podemos agregar valores de retraso, inicio y final, detener, iniciar, actualizar y restablecer.
Sintaxis: Cree un contador de la siguiente manera:
<blaze-counter class="u-super u-text--mono" auto-start start-value=val end-value=val delay=num duration="5" id="counter" ></blaze-counter>
Eventos de contador de Blaze UI:
- inicio automático : este campo toma un tipo de valor booleano y pregunta si el temporizador debe iniciarse automáticamente o no.
- start-value : este campo solicita el valor a partir del cual iniciar el contador.
- valor final: este campo solicita el valor donde terminará el contador.
- duración: Este campo pregunta por la duración en segundos que va a durar el contador.
- retardo: Este campo pregunta por la duración en milisegundos que el contador se va a iniciar.
- decimales: este campo solicita el número de decimales que se mostrarán cuando se inicie el contador.
- completado: esta devolución de llamada se llama cuando se alcanza el valor final.
Ejemplo 1: En el siguiente ejemplo, tenemos un contador que termina en 0.
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" /> <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> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Counter Events</strong> <br /> <br /> <p>Welcome to GeeksforGeeks</p> <blaze-counter class="u-super u-text--mono" auto-start start-value="9" end-value="100000" duration="5" id="counter"> <span slot="prefix">$</span> </blaze-counter> </center> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo tenemos un retraso en nuestro contador.
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" /> <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> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Counter Events</strong> <br /> <br /> <blaze-counter class="u-super u-text--mono" auto-start start-value="0" end-value="100" delay="2000" duration="8" id="counter"> <span slot="suffix"> Likes</span> </blaze-counter> </center> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/counter/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA