Blaze UI es un conjunto de herramientas de interfaz de usuario que ayuda a los desarrolladores a crear sitios web mantenibles mediante el uso de sus componentes. Todos sus componentes son móviles primero y se escalan en consecuencia según el tamaño de la pantalla.
Los rangos de Blaze UI se conocen como controles deslizantes , básicamente, se utilizan para especificar el rango de valores cuando arrastramos el control deslizante. Podemos crear el control deslizante para establecer el rango y los usuarios pueden elegir cualquier valor arrastrando el control deslizante.
Clases de rangos de interfaz de usuario de Blaze:
- c-range: esta clase se usa para agregar el rango de interfaz de usuario de Blaze.
Sintaxis:
<input type="range" class="c-range">
Ejemplo 1: el siguiente código demuestra los intervalos 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> <h3>Blaze UI Ranges</h3> <input type="range" class="c-range"> </body> </html>
Producción:
Ejemplo 2: el siguiente código demuestra los rangos de la interfaz de usuario de Blaze con diferentes colores.
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> <h3>Blaze UI Ranges</h3> <input type="range" class="c-range c-range--brand"> <input type="range" class="c-range c-range--info"> <input type="range" class="c-range" disabled> <input type="range" class="c-range c-range--warning"> <input type="range" class="c-range c-range--success"> <input type="range" class="c-range c-range--error"> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/ranges/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA