Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
Onsen UI CSS Component Material Range se utiliza para crear el control deslizante de rango de material para establecer cualquier valor arrastrando el controlador. Para crear el rango de material, usaremos las siguientes clases.
Onsen UI CSS Component Material Rango Clases:
- range–material: esta clase se utiliza para crear el rango de material.
- range–material__input: esta clase se utiliza para crear la entrada de rango de material.
- range–material__focus-ring: esta clase se utiliza para crear el enfoque de rango de material.
- range–disabled : esta clase se usa para deshabilitar el rango de material.
Sintaxis:
<div class="range range--material">
<input type="range"
class="range__input
range--material__input"
min="0" max="100">
</div>
Ejemplo 1: El siguiente ejemplo demuestra el rango de materiales del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Material Range </h3> <div class="range range--material"> <input type="range" class="range__input range--material__input"> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el rango de materiales del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Material Range </h3> <strong> Disabled material range: </strong> <br> <div class="range range--material range--disabled"> <input type="range" class="range__input range--material__input"> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#range-category
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA