material-design-lite - google - material design lite select
¿Cómo formatear el cuadro de selección con Material Design Lite? (9)
De todos modos, observe cómo lo implementó el equipo de Angular Material : https://material.angularjs.org/latest/#/demo/material.components.select
Sí, al igual que una entrada + menú desplegable
He leído la lista de Componentes y la CSS proporcionada, pero no veo ninguna mención de cuadros de selección, solo entradas regulares; Texto, radio, casilla de verificación, área de texto, etc.
¿Cómo utiliza Material Design Lite con un cuadro de selección? El uso de las clases para un ingreso de texto regular lo lleva a la mitad, pero ciertamente no es correcto.
Esto funcionó bastante bien para mí (usando combustible como ejemplo):
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="octane" name="octane">
<option></option>
<option value="85">85</option>
<option value="87">87</option>
<option value="89">89</option>
<option value="91">91</option>
<option value="diesel">Diesel</option>
</select>
<label class="mdl-textfield__label" for="octane">Octane</label>
</div>
No se necesitan bibliotecas ni nada, solo el estándar MDL CSS y JavaScript.
Estoy usando este en una aplicación Angular2. Fue fácil de instalar / instalar / usar:
https://github.com/mebibou/mdl-selectfield
npm install mdl-selectfield
Luego incluye el CSS y JS:
<link rel="stylesheet" href="./node_modules/mdl-selectfield/dist/mdl-selectfield.min.css">
Luego agrega clases a tu HTML. Aquí hay un ejemplo:
<div class="mdl-selectfield mdl-js-selectfield">
<select id="gender" class="mdl-selectfield__select">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<label class="mdl-selectfield__label" for="gender">User gender</label>
<span class="mdl-selectfield__error">Select a value</span>
</div>
Mientras el equipo de Google está trabajando en esto, necesitaba crear una solución rápida y fácil para este problema y escribí una función javascript / jquery:
Por ahora, lo que hice fue un menú en JavaScript. Necesitaba hacer esto en JavaScript de todos modos para mis propósitos, por lo que no fue un problema usar solo un menú en lugar de un menú desplegable. ¡Esperamos que te sea útil!
<div id="insert-here"></div>
<script>
var onSelect = function(){
this.button.innerHTML = this.innerHTML;
}
var insertPoint = ''insert-here'';
var numberOfDropdowns = 0;
function makeDropdown(options){
// create the button
var button = document.createElement(''BUTTON'');
button.id = numberOfDropdowns; // this is how Material Design associates option/button
button.setAttribute(''class'', ''mdl-button mdl-js-button'');
button.innerHTML = ''Default'';
document.getElementById(insertPoint).appendChild(button);
// add the options to the button (unordered list)
var ul = document.createElement(''UL'');
ul.setAttribute(''class'', ''mdl-menu mdl-js-menu mdl-js-ripple-effect'');
ul.setAttribute(''for'', numberOfDropdowns); // associate button
for(var index in options) {
// add each item to the list
var li = document.createElement(''LI'');
li.setAttribute(''class'', ''mdl-menu__item'');
li.innerHTML = options[index];
li.button = button;
li.onclick = onSelect;
ul.appendChild(li);
}
document.getElementById(insertPoint).appendChild(ul);
// and finally add the list to the HTML
numberOfDropdowns++;
}
var optionsA = ["a", "b", "c", "d"];
makeDropdown(optionsA);
var optionsB = ["e", "f", "g", "h"];
makeDropdown(optionsB);
</script>
Enlace jsFiddle: https://jsfiddle.net/zatxzx6b/3/embedded/result/
Project Polymer es de Google y es la mejor opción para varios componentes que faltan en Material Design lite. Puede encontrar detalles sobre cómo obtener elementos de polímero aquí https://elements.polymer-project.org/guides/using-elements
Específicamente, puede encontrar un componente web desplegable de selección aquí: https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html
Sé que este post es viejo. Pero tenía una solución diferente que me funcionó muy bien y quería compartir.
Aproveché la solución de @John Knott para usar mdl textfield con select como mdl-textfield__input + @ user2255242 de la solución de un menú pero sin los js involucrados.
Aquí hay un violín que ilustra la solución.
HTML - He utilizado un campo de texto + un menú (ul + li) para actuar como selección, el css hace el resto.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div id="app">
<div class="sorter-holder">
<!-- the textfield, notice the readonly on input -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" v-model="sortBy" id="sorterHolder" readonly>
<label class="mdl-textfield__label" for="sorterHolder">Sort by</label>
</div>
<!-- menu which will act as the options of select. The menu is for the input, and not the div which has mdl-textfield class -->
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect sorter-menu" for="sorterHolder">
<li class="mdl-menu__item" v-for="srtr in sortables" @click="update(srtr)">{{ srtr }}</li>
</ul>
</div>
</div>
CSS - la parte principal es el css
/*
The menu is positioned absolute, and it''s positions are calculated dynamically (I think). I wanted it to extend for the entire width of input, and for that needed a relative parent.
Also, the display inline-block was not required in where I actually implemented it. Over there, it was block. So, this might need to change according to layout. */
.sorter-holder {
position: relative;
display: inline-block;
}
/* just giving them a width of 100% to extend for the entire textfield */
.sorter-holder .mdl-menu__outline,
.sorter-holder .mdl-menu__container,
.sorter-menu {
width: 100% !important;
}
VueJS: el ejemplo está en Vue JS, pero se puede replicar fácilmente en cualquier otro marco, ya que lo principal se realiza mediante HTML + CSS
new Vue({
el: "#app",
data: {
sortables: [
''Name (A-Z)'',
''Name (Z-A)'',
''Newest First'',
''Oldest First''
],
sortBy: null
},
methods: {
update: function (sortBy) {
this.sortBy = sortBy;
}
}
})
¿Por qué lo hice de esta manera?
El menú se veía visualmente mejor que el cuadro de selección del navegador predeterminado. Pero, no quería hacer algo de magia css en la opción seleccionada. Y, esto parecía más fácil que eso.
Esto se puede hacer de muchas otras maneras. Lo encontré mejor e implementado en uno de mis proyectos. ¡Espero eso ayude! :)
También me encontré con el mismo problema. Implementar uno mismo siempre es bueno, pero si quiere ahorrar tiempo, esta biblioteca hizo un buen trabajo. https://github.com/MEYVN-digital/mdl-selectfield . Simplemente agregue esto junto con el archivo JS en el <head> :
<div class="mdl-selectfield mdl-js-selectfield">
<select id="myselect" name="myselect" class="mdl-selectfield__select">
<option value=""></option>
<option value="option0_value">option 0</option>
<option value="option1_value">option 1</option>
</select>
<label class="mdl-selectfield__label" for="myselect">Choose option</label>
</div>
Utilizo un código jquery y una clase css para ingresar texto de tipo, como este:
código jquery:
$(document).ready(function () {
$("select").change(function () {
if ($(''#'' + $(this).attr("id") + '' option:selected'').val() === '''') {
$(this).parent(''div'').removeClass(''is-dirty'');
} else {
$(this).parent(''div'').addClass(''is-dirty'');
}
});
});
en html (la primera opción debe estar vacía):
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select id="example" class="mdl-textfield__input">
<option value=""></option>
<option value="1">Option</option>
</select>
<label class="mdl-textfield__label is-dirty" for="example">example</label>
</div>