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.
El rango básico del componente CSS de la interfaz de usuario de Onsen se usa para crear el control deslizante de rango para establecer cualquier valor arrastrando el controlador. Para crear el rango básico, usaremos las siguientes clases.
Clases de rango básico del componente CSS de la interfaz de usuario de Onsen:
- rango: Esta clase se utiliza para crear el rango.
- range__input: esta clase se utiliza para crear la entrada de rango.
- range__focus-ring: esta clase se utiliza para crear el anillo de enfoque en el rango.
- range–disabled: esta clase se utiliza para deshabilitar el rango.
Sintaxis:
<div class="range">
<input type="range"
class="range__input">
<input type="range"
class="range__focus-ring">
</div>
Ejemplo 1: El siguiente ejemplo demuestra el rango básico 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 Basic Range </h3> <div class="range"> <input type="range" class="range__input"> <input type="range" class="range__focus-ring"> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el rango básico 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 Basic Range </h3> <strong> Disabled Range </strong> <br> <div class="range range--disabled"> <input type="range" class="range__input" disabled> <input type="range" class="range__focus-ring" disabled> </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