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 Sin borde La casilla de verificación se usa para crear la casilla de verificación sin el borde. Para crear la casilla de verificación Sin borde, utilizaremos las siguientes clases de casilla de verificación.
Onsen UI CSS Componente Sin borde Casilla de verificación Clases:
- checkbox–noborder: esta clase se utiliza para crear la casilla de verificación sin borde.
- checkbox–noborder__input: esta clase se utiliza para crear la entrada de casilla de verificación sin borde.
- checkbox–noborder__checkmark: esta clase se utiliza para crear la marca de verificación de casilla de verificación sin borde.
Sintaxis:
<label class="checkbox
checkbox--noborder">
<input type="checkbox"
class="checkbox__input
checkbox--noborder__input">
<div class="checkbox__checkmark
checkbox--noborder__checkmark">
</div>
...
</label>
Ejemplo 1: El siguiente ejemplo muestra la casilla de verificación Sin borde 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 No border Checkbox </strong> <br> <br> <label class="checkbox checkbox--noborder"> <input type="checkbox" class="checkbox__input checkbox--noborder__input"> <div class="checkbox__checkmark checkbox--noborder__checkmark"> </div> Checkbox </label> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la casilla de verificación Sin borde 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 No border Checkbox </strong> <br> <br> <label class="checkbox checkbox--noborder"> <input type="checkbox" class="checkbox__input checkbox--noborder__input"> <div class="checkbox__checkmark checkbox--noborder__checkmark"> </div> Java </label> <label class="checkbox checkbox--noborder"> <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked disabled> <div class="checkbox__checkmark checkbox--noborder__checkmark"> </div> Python </label> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#checkbox-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