Casilla de verificación de material del componente CSS de la interfaz de usuario de Onsen

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.

Las casillas de verificación se utilizan para casos en los que un usuario puede desear seleccionar varias opciones, como en el caso de una pregunta de «marque todo lo que corresponda», en los formularios. La casilla de verificación de material del componente CSS de la interfaz de usuario de Onsen se utiliza para crear la casilla de verificación de material en la interfaz de usuario de Onsen utilizando las siguientes clases.

Onsen UI CSS Component Material Clases de casilla de verificación:

  • checkbox–material: esta clase se utiliza para crear la casilla de verificación de material.
  • checkbox__input: esta clase se utiliza para crear la entrada de la casilla de verificación.
  • checkbox–material__input: esta clase se utiliza para crear la entrada de casilla de verificación de material.
  • checkbox__checkmark: esta clase se utiliza para crear la marca de verificación de la casilla de verificación.
  • checkbox–material__checkmark: esta clase se utiliza para crear la marca de verificación de la casilla de verificación del tipo de material.

Sintaxis:

<label class="checkbox checkbox--material">
  <input type="checkbox" class="checkbox__input 
                           checkbox--material__input">
  <div class="checkbox__checkmark 
                checkbox--material__checkmark">
  </div>
  ...
</label>

Ejemplo 1: El siguiente ejemplo muestra la casilla de verificación 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 Checkbox
        </strong> <br> <br>
  
        <label class="checkbox checkbox--material">
            <input type="checkbox" 
                   class="checkbox__input 
                          checkbox--material__input">
            <div class="checkbox__checkmark 
                        checkbox--material__checkmark">
            </div>
            GeeksforGeeks
        </label>
    </center>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra la casilla de verificación 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 Checkbox
        </strong> <br> <br>
  
        <label class="checkbox checkbox--material">
            <input type="checkbox" 
                   class="checkbox__input 
                          checkbox--material__input">
            <div class="checkbox__checkmark 
                        checkbox--material__checkmark">
            </div>
            Java
        </label>
  
        <label class="checkbox checkbox--material">
            <input type="checkbox" 
                   class="checkbox__input 
                          checkbox--material__input" 
                    checked>
            <div class="checkbox__checkmark 
                        checkbox--material__checkmark">
            </div>
            C++
        </label>
  
        <label class="checkbox checkbox--material">
            <input type="checkbox" 
                   class="checkbox__input 
                          checkbox--material__input" 
                    disabled>
            <div class="checkbox__checkmark 
                        checkbox--material__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 harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *