Wie formatieren Sie Selectbox mit Material Design Lite?

Question

Ich habe die Komponentenliste durchgelesen und die bereitgestellten CSS gelesen, aber ich sehe keine Erwähnung ausgewählter Boxen - nur normale Eingaben; Text, Radio, Checkbox, Textarea usw.

Wie verwenden Sie Material Design Lite mit einer Auswahlbox? Die Verwendung der Klassen für eine normale Texteingabe bringt Sie zur Hälfte, aber es ist sicherlich nicht korrekt.

Answer 1

Wie auch immer, werfen Sie einen Blick, wie Angular Material Team hat implementieren: https://material.angularjs.org/latest/#/demo/material.components.select

Yep, genau wie ein Eingang + Drop-Down-

Answer 2

Vorerst, was ich in JavaScript ein Menü tat. Das musste ich sowieso in JavaScript für meine Zwecke tun, also war es kein Problem, einfach ein Menü anstelle eines Dropdowns zu verwenden. Ich hoffe, Sie finden es nützlich!

<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> 

jsFiddle Link: https://jsfiddle.net/zatxzx6b/3/embedded/result/

Answer 3

Während das Google-Team daran gearbeitet wird, die ich brauchte eine schnelle und einfache Lösung für dieses Problem und hat eine JavaScript/jQuery-Funktion zu erstellen:

Material Design Lite--Select

Answer 4

Project Polymer ist von Google und seine beste Option für verschiedene Komponenten, die in Material Design Lite fehlen. Sie können Informationen finden, wie Polymerelemente hier https://elements.polymer-project.org/guides/using-elements

Speziell zu erhalten, können Sie eine ausgewählte Drop-Down-Web-Komponente finden Sie hier - https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html