Question

我正在尝试创建反映Google的材料设计原则的不同表单元素。我注意到我无法在任何地方找到下拉示例。我能找到的最接近的是 Polymer Project。

我的问题是：

Google是否回避在Material Design中使用此特定表单输入类型？
有人可以指导我如何创建一个类似的选择表格输入到链接中显示的输入。我知道链接中显示的那个本身并不是表单输入，但对于表单<select>来说肯定有类似的东西。

我尝试使用CSS转换普通选择，但这似乎非常棘手。另一个选择是使用Javascript和Unordered列表重新创建select，但是这个解决方案的用户（设备和开发人员）如何友好？

Answer 1

＆＃13;

* {
    box-sizing: border-box;
}
.dropdown {
    display:inline-block;
    margin:30px;
    position: relative;
    padding:0;
    border:0;
    border-radius:5px;
    font-size:24px;
    font-weight:400;
    background:#26A69A;
    color:#FFF;
    box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}
.dropdown > input{
    display:none;
    position:fixed;
    z-index:-2;
}
.dropdown > label{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.drop-ttl{
    font-weight:400;
    padding:5px 20px;
}
.dropdown ul {
    width:100%;
    font-weight:400;
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    text-align:center;
    list-style-type:none;
    background:#FFF;
    color:#26A69A;
    box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
    border-radius:5px;
}
.dropdown ul >li{
    padding:5px 20px;
}
.dropdown ul > li > a{
    color:inherit;
    outline:0;
    text-decoration:none;
    cursor:pointer;
}
.dropdown ul > li:hover{
    background:#DEDEDE;
}
input[type="checkbox"]:checked ~ label > ul {
    display:none;
}

＆＃13;

<div class="dropdown">
    <input id="checkbox1" type="checkbox" name="checkbox" checked />
    <label for="checkbox1">
        <div class="drop-ttl">Dropdown</div>
        <ul>
            <li><a>First</a></li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth</li>
        </ul>
    </label>
</div>

＆＃13;

这是一个很好的仅限CSS的材料下拉列表。如果它有帮助，请+1。

Answer 2

你可以将其作为Material-UI component

获取

如果你使用AngularJs，Material Angular project是一个很好的材料设计场所（仍然没有下拉列表。目前他们正在为md-dropdown指令工作）

编辑：看来你甚至可以通过导入这个来使用聚合物元素：

<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">

Answer 3

在github上存在一个问题; https://github.com/google/material-design-lite/issues/854

与此同时，我制作了自己的“仅限css”-version（简单）http://codepen.io/pudgereyem/pen/PqBxQx/

  <!-- Standard Select -->
  <div class="mdl-selectfield">
    <label>Standard Select</label>
    <select class="browser-default">
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>

如果你想要一个Javascript版本来整理整个东西，我建议你查看materializecss。

Answer 4

以下是我使用jQuery，UL列表和隐藏input的内容（因此您最终可以使用表单提交数据值）。

jQuery(function($){
  // /////
  // MAD-SELECT
  var madSelectHover = 0;
  $(".mad-select").each(function() {
    var $input = $(this).find("input"),
        $ul = $(this).find("> ul"),
        $ulDrop =  $ul.clone().addClass("mad-select-drop");
    $(this)
      .append('<i class="material-icons">arrow_drop_down</i>', $ulDrop)
      .on({
      hover : function() { madSelectHover ^= 1; },
      click : function() { $ulDrop.toggleClass("show"); }
    });
    // PRESELECT
    $ul.add($ulDrop).find("li[data-value='"+ $input.val() +"']").addClass("selected");
    // MAKE SELECTED
    $ulDrop.on("click", "li", function(evt) {
      evt.stopPropagation();
      $input.val($(this).data("value")); // Update hidden input value
      $ul.find("li").eq($(this).index()).add(this).addClass("selected")
        .siblings("li").removeClass("selected");
    });
    // UPDATE LIST SCROLL POSITION
    $ul.on("click", function() {
      var liTop = $ulDrop.find("li.selected").position().top;
      $ulDrop.scrollTop(liTop + $ulDrop[0].scrollTop);
    });
  });
  // CLOSE ALL OPNED
  $(document).on("mouseup", function(){
    if(!madSelectHover) $(".mad-select-drop").removeClass("show");
  });
});

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0, 0.2);
    border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0, 0.3);
}

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

body{
  font: 16px/24px Roboto, sans-serif;
  background: #fafafa;
}


/*
MAD-SELECT by Roko CB
*/
.mad-select .material-icons{
  vertical-align: middle;
}
.mad-select{
  position:relative;
  display:inline-block;
  vertical-align:middle;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding-right: 8px;
}
.mad-select ul {
  list-style: none;
  display:inline-block;
  margin:0; padding:0;
}
.mad-select li{
  vertical-align: middle;
  white-space: nowrap;
  height:24px;
  line-height:24px;
  display: none;
  padding: 8px 16px;
  margin:0;
  box-sizing: initial;
}
.mad-select > ul:first-of-type{
   max-width:120px; /* COMMENT FOR AUTO WIDTH */
}
.mad-select > ul:first-of-type li.selected{
  display: inline-block;
  height: 24px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.mad-select i.material-icons{
  opacity: 0.5;
  margin:0;
  padding:0;
}
/*jQ*/
.mad-select ul.mad-select-drop{
  position: absolute;
  z-index: 9999;
  visibility: hidden; opacity:0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  top: 0;
  left: 0;
  transition: 0.24s;
  max-height: 0;
  overflow: hidden;
  overflow-y: auto;
}
.mad-select ul.mad-select-drop.show{
  visibility: visible; opacity: 1;
  max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */
}
.mad-select ul.mad-select-drop li{
  display: block;
  transition: background 0.24s;
  cursor: pointer;
}
.mad-select ul.mad-select-drop li.selected{
  background: rgba(0,0,0,0.07);
}
.mad-select ul.mad-select-drop li:hover{
  background: rgba(0,0,0,0.04);
}

<link href='https://fonts.googleapis.com/css?family=Roboto:500,400,300,100&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

Select an option:
<div class="mad-select">
  <ul>
    <li data-value="1">Option 1</li>
    <li data-value="2 foo">Option 2</li>
    <li data-value="3 bar">Option 3</li>
    <li data-value="4">Option 4</li>
    <li data-value="5">Option long desc 5</li>
    <li data-value="6">Option 6</li>
    <li data-value="7">Option 7</li>
    <li data-value="8">Option 8</li>
  </ul>
  <input type="hidden" name="myOptions" value="3 bar">
</div>

Answer 5

看看https://github.com/CreativeIT/getmdl-select。它是我们使用本机mdl菜单样式的select组件的实现。它提供了一种使用原生Material Design lite菜单样式进行选择输入的快速方法。

您可以在此页http://creativeit.github.io/getmdl-select/

上找到有用的示例

材料设计选择下拉列表

5 个答案: