Как отформатировать поле выбора с помощью Material Design Lite?

Question

Я прочитал список компонентов и прочитал предоставленный CSS, но я не вижу упоминания о выбранных блоках - просто регулярные входы; текст, радио, флажок, текстовое поле и т. д.

Как вы используете Material Design Lite с помощью блока выбора? Использование классов для регулярного ввода текста доставит вас на полпути, но это, конечно, неверно.

Answer 1

Во всяком случае, посмотрит, как Angular Material команды реализовать: https://material.angularjs.org/latest/#/demo/material.components.select

Да, так же, как вход + выпадающее меню

Answer 2

сейчас, что я сделал меню в JavaScript. Мне все равно нужно было сделать это в JavaScript для моих целей, поэтому было не просто использовать меню вместо выпадающего списка. Надеюсь, вы найдете ее полезной!

<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 ссылка: https://jsfiddle.net/zatxzx6b/3/embedded/result/

Answer 3

Пока команда Google работает над этим, мне нужно, чтобы быстро создать и простое решение этой проблемы и написал функцию JavaScript/JQuery:

Material Design Lite--Select

Answer 4

Project Polymer от Google и его лучший вариант для различных компонентов, отсутствующих в Material Design lite. Вы можете найти подробную информацию о том, как получить полимерные элементы здесь https://elements.polymer-project.org/guides/using-elements

В частности, вы можете найти выберите выпадающий веб-компонент здесь - https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html