Lista de materiales del componente CSS de la interfaz de usuario de Onsen con casillas de verificación

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 listas se utilizan para almacenar datos o información en las páginas web en forma ordenada o desordenada. La lista de materiales del componente CSS de la interfaz de usuario de Onsen con casillas de verificación se utiliza para crear las casillas de verificación en la lista de materiales utilizando las siguientes clases.

Lista de materiales del componente CSS de la interfaz de usuario de Onsen con clases de casillas de verificación:

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

Sintaxis:

<ul class="list list--material">
  <li class="list-item list-item--material">
    <div class="list-item__left 
                list-item--material__left">
      <label class="checkbox checkbox--material">
        <input type="checkbox" id=".." 
               class="checkbox__input 
               checkbox--material__input">
        <div class="checkbox__checkmark 
             checkbox--material__checkmark">
        </div>
      </label>
    </div>
</ul>

Ejemplo 1: El siguiente ejemplo muestra la Lista de materiales del componente CSS de la interfaz de usuario de Onsen con casillas de verificación.

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 List with Checkboxes
        </h3>
        <ul class="list list--material">
            <li class="list-item list-item--material">
                <div class="list-item__left 
                            list-item--material__left">
                    <label class="checkbox checkbox--material">
                        <input type="checkbox" id="cb" 
                               class="checkbox__input 
                               checkbox--material__input">
                        <div class="checkbox__checkmark 
                             checkbox--material__checkmark">
                        </div>
                    </label>
                </div>
          
                <label for="cb" class="list-item__center 
                                list-item--material__center">
                    <div class="list-item__title 
                                list-item--material__title">
                        GeeksforGeeks
                    </div>
                </label>
            </li>
        </ul>
    </center>
</body>
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra la Lista de materiales del componente CSS de la interfaz de usuario de Onsen con casillas de verificación especificando la casilla de verificación deshabilitada. 

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 List with Checkboxes
        </h3> 
        <ul class="list list--material">
            <li class="list-item list-item--material">
                <div class="list-item__left 
                            list-item--material__left">
                    <label class="checkbox checkbox--material">
                        <input type="checkbox" id="cb" 
                               class="checkbox__input 
                               checkbox--material__input">
                        <div class="checkbox__checkmark 
                             checkbox--material__checkmark">
                        </div>
                    </label>
                </div>
                <label for="cb" class="list-item__center 
                                list-item--material__center">
                    <div class="list-item__title 
                                list-item--material__title">
                        GeeksforGeeks
                    </div>
                    <div class="list-item__subtitle 
                                list-item--material__subtitle">
                        This is subtitle 1
                    </div>
                </label>
            </li>
  
            <li class="list-item list-item--material">
                <div class="list-item__left 
                            list-item--material__left">
                    <label class="checkbox checkbox--material">
                        <input type="checkbox" id="cb2" 
                               class="checkbox__input 
                               checkbox--material__input"
                               checked disabled>
                        <div class="checkbox__checkmark 
                             checkbox--material__checkmark">
                        </div>
                    </label>
                </div>
                <label for="cb2" class="list-item__center 
                                list-item--material__center">
                    <div class="list-item__title 
                                list-item--material__title">
                        Disabled checkbox
                    </div>
                    <div class="list-item__subtitle 
                                list-item--material__subtitle">
                        This is subtitle 2
                    </div>
                </label>
            </li>
        </ul>
    </center>
</body>
</html>

Producción:

 

Referencia: https://onsen.io/v2/api/css.html#list-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 *