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. En este artículo, veremos el interruptor de material del componente CSS de la interfaz de usuario de Onsen.
El interruptor de material del componente CSS de la interfaz de usuario de Onsen se usa para crear el interruptor de material utilizando las clases de interruptor de interfaz de usuario de Onsen. Para crear el cambio de material, utilizaremos las siguientes clases.
Clases de cambio de material del componente CSS de la interfaz de usuario de Onsen:
- switch–material: esta clase se utiliza para crear el interruptor de material.
- switch–material__input: esta clase se usa para crear la entrada de interruptor de material.
- switch–material__toggle: esta clase se utiliza para crear el interruptor de alternancia de material.
- switch–material__handle: esta clase se utiliza para crear el identificador de cambio de material.
Sintaxis:
<label class="switch switch--material">
<input type="checkbox"
class="switch__input
switch--material__input">
<div class="switch__toggle
switch--material__toggle">
<div class="switch__handle
switch--material__handle">
</div>
</div>
</label>
Ejemplo 1: El siguiente ejemplo demuestra el interruptor de material 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> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Switch </strong> <br> <br> <label class="switch switch--material"> <input type="checkbox" class="switch__input switch--material__input"> <div class="switch__toggle switch--material__toggle"> <div class="switch__handle switch--material__handle"> </div> </div> </label> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el cambio de material del componente CSS de la interfaz de usuario de Onsen con el atributo disabled .
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> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Switch </strong> <br> <br> <label class="switch switch--material"> <input type="checkbox" class="switch__input switch--material__input"> <div class="switch__toggle switch--material__toggle"> <div class="switch__handle switch--material__handle"> </div> </div> </label> <label class="switch switch--material"> <input type="checkbox" class="switch__input switch--material__input" disabled> <div class="switch__toggle switch--material__toggle"> <div class="switch__handle switch--material__handle"> </div> </div> </label> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#switch-category
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA