如何使用Material Design Lite格式化选择框？

Question

如何使用Material Design Lite格式化选择框？

我已经阅读了组件列表并阅读了所提供的CSS,但我没有看到任何提到的选择框 - 只是常规输入; 文本,收音机,复选框,textarea等

如何在选择框中使用Material Design Lite？使用常规文本输入的类将您带到中途,但肯定不正确.

Answer 1

这对我来说非常好(以燃料为例):

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

Run Code Online (Sandbox Code Playgroud)

没有库或任何东西只需要标准的MDL CSS和JavaScript.

我找到了这个网站:http://creativeit.github.io/getmdl-select/有不同的变化和选项.此外,使用标准MDL. (5认同)

Answer 2

Jac*_*son 13

现在,我所做的是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>

Run Code Online (Sandbox Code Playgroud)

jsFiddle链接:https://jsfiddle.net/zatxzx6b/3/embedded/result/

Answer 3

nov*_*int 5

我也遇到了同样的问题。实现自己总是很棒的，但是如果您想节省时间，那么这个库做得很好。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>

Run Code Online (Sandbox Code Playgroud)

JSFiddle

Answer 4

Ser*_*lov -1

无论如何，看看Angular Material团队是如何实现它的：https ://material.angularjs.org/latest/#/demo/material.components.select

是的，就像输入+下拉菜单一样

归档时间：	10 年，3 月前
查看次数：	42582 次
最近记录：	7 年，1 月前