Materialise proporciona una función de selección para crear opciones que se pueden seleccionar fácilmente para proporcionar más información para los formularios web. Las siguientes son características de selección diferentes:
- opción de selección simple: permite seleccionar una opción del menú desplegable de selección. Para ello se utilizan las etiquetas <select> y <option>.
- menú desplegable de selección con selección múltiple de opciones: permite seleccionar más de una opción del menú desplegable de selección. Para esto, se utilizan múltiples atributos en la etiqueta <select>.
- menú desplegable de selección con grupos de opciones: permite seleccionar de una lista es una categoría basada en el menú desplegable de selección.
- seleccionar menú desplegable con imágenes: permite mostrar imágenes con opciones.
- Seleccione el menú desplegable con los valores predeterminados del navegador: se puede usar con la clase predeterminada en la etiqueta de selección.
Estilos deshabilitados:
Materialise select proporciona una función deshabilitada que tiene su propio uso. Para hacer que todo no se pueda seleccionar, agregue el atributo deshabilitado al elemento seleccionado y para deshabilitar las opciones individuales, luego agregue deshabilitado a las opciones.
Ejemplo:
html
<!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="row">
<form class="col s12">
<div class="row">
<label>Select</label>
<div class="select1 green-text">
<select>
<option value=""
disabled selected>
Select Topic
</option>
<option value="1">
Machine Learning</option>
<option value="2">
Web Development</option>
<option value="3">
Language</option>
</select>
</div>
</div>
<div class="row green-text">
<label>Multi Select</label>
<select multiple>
<option value=""
disabled selected>
Select Topic</option>
<option value="1">
Machine Learning</option>
<option value="2">
Web Development</option>
<option value="3">
Language</option>
</select>
</div>
<div class="row green-text">
<label>Select with Optgroup</label>
<select>
<optgroup label="Web Development">
<option value="1">
HTML</option>
<option value="2">
CSS</option>
<option value="3">
JavaScript</option>
</optgroup>
<optgroup label="Language">
<option value="4">
Python</option>
<option value="5">
C</option>
<option value="6">
Java</option>
</optgroup>
</select>
</div>
<div class="row green-text">
<label>Select with images</label>
<select class="icons">
<option value=""
disabled selected>
Select Technology</option>
<option value="1"
data-icon=
"https://pbs.twimg.com/profile_images/1138375574726955008/1fNUyEdv_400x400.png"
class="circle"> HTML</option>
<option value="2">JavaScript</option>
<option value="3">CSS</option>
</select>
</div>
<div class="row green-text">
<label>Browser default Select</label>
<select class="browser-default">
<option value=""
disabled selected>
Select Topic</option>
<option value="1">
Machine Learning</option>
<option value="2">
Web Development</option>
<option value="3">
Language</option>
</select>
</div>
<div class="row green-text">
<label>
Disabled Materialize Select</label>
<label>
Disabled Materialize Select</label>
<select disabled>
<option value=""
disabled selected>
Select Topic</option>
<option value="1">
Machine Learning</option>
<option value="2">
Web Development</option>
<option value="3">
Language</option>
</select>
</div>
<div class="row green-text">
<label>Disabled Browser
default Select</label>
<select class="browser-default"
disabled>
<option value=""
disabled selected>
Select Topic</option>
<option value="1">
Machine Learning</option>
<option value="2">
Web Development</option>
<option value="3">
Language</option>
</select>
</div>
</form>
</div>
<script>
$(document).ready(function () {
$("select").material_select();
});
</script>
<!-- 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