Materialise proporciona una función de casilla de verificación para crear casillas de verificación con estilo para los sitios web. Las casillas de verificación HTML estándar son simples con un borde negro simple en los estados sin marcar y una marca de verificación en los estados marcados, pero con el estilo de borde materializado se puede cambiar junto con la marca de verificación.
Para crear una casilla de verificación con el estilo predeterminado, se utiliza <input type=”checkbox”> . El atributo for es necesario para vincular la casilla de verificación personalizada con la entrada. Esto se hace agregando la identificación de la entrada como el valor del atributo de la etiqueta. El siguiente ejemplo muestra todos los diferentes tipos de casillas de verificación utilizadas en el formulario de materialización.
Ejemplo:
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body class="container"> <div class="intro-text"> <h3>Checkbox with Materialize CSS</h3> <form action="#"> <p> <input type="checkbox" id="test1" /> <label for="test1">First Option</label> </p> <p> <input type="checkbox" id="test2" checked="checked" /> <label for="test2">Checked Option</label> </p> <p> <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" /> <label for="filled-in-box"> Filled in</label> </p> <p> <input id="indeterminate-checkbox" type="checkbox" /> <label for="indeterminate-checkbox"> Indeterminate Style</label> </p> <p> <input type="checkbox" id="test3" checked="checked" disabled="disabled" /> <label for="test3"> Disabled Ckeched</label> </p> <p> <input type="checkbox" id="test4" disabled="disabled" /> <label for="test4">Disabled</label> </p> </form> </div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA