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

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

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

Ответы

Ответ 1

На данный момент я использовал меню в 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 link: https://jsfiddle.net/zatxzx6b/3/embedded/result/

Ответ 2

Это работало довольно хорошо для меня (используя топливо в качестве примера):

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

Никаких библиотек и ничего не нужно только для стандартных MDL CSS и JavaScript.

Ответ 3

Я столкнулся с тем же вопросом. Реализация себя всегда велика, но если вы хотите сэкономить время, эта библиотека проделала очень хорошую работу. https://github.com/MEYVN-digital/mdl-selectfield. Просто добавьте это вместе с JS файлом в <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>

JSFiddle

Ответ 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

Ответ 5

Я использую это в приложении Angular2. Было легко установить/установить/использовать:

https://github.com/mebibou/mdl-selectfield

npm install mdl-selectfield

Затем включите CSS и JS:

<link rel="stylesheet" href="./node_modules/mdl-selectfield/dist/mdl-selectfield.min.css"> <script src="./node_modules/mdl-selectfield/dist/mdl-selectfield.min.js"></script>

Затем добавьте классы в свой HTML. Вот пример:

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

Ответ 6

Я использую код jquery и класс css для ввода типа текста, например:

Код 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');
        }
     });
});

в html (первый параметр должен быть пустым):

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

Ответ 8

В то время как команда Google работает над этим, мне нужно было создать быстрое и легкое решение этой проблемы и написать функцию javascript/jquery:

Material Design Lite - выберите