材料设计选择下拉菜单

Question

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

我的问题是：

1. Google 是否会回避在 Material Design 中使用这种特殊的表单输入类型？
2. 谁能指导我如何创建与链接中显示的输入类似的选择表单输入。我知道链接中显示的内容本身并不是表单输入，但对于<select> 的表单肯定有类似的可能。

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

Answer 1

* {
    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;
}

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

这是一个不错的纯 CSS 材质下拉菜单。如果有帮助，请 +1。

Answer 2

这是我使用一点 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 3

您可以通过Material-UI component 获取它

如果你正在使用 AngularJs，Material Angular project 是材料设计的好地方（仍然，下拉菜单不可用。目前他们正在使用它作为 md-dropdown 指令）

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

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

Answer 4

github 上有一个关于此的问题； https://github.com/google/material-design-lite/issues/854.

与此同时，我制作了自己的“仅 css”版本（简单）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 5

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

您可以在此页面上找到工作示例http://creativeit.github.io/getmdl-select/

Answer 6

您可以使用Tronic247 Material 创建选择菜单。请参阅下面的示例。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Basic HTML5 Template</title>
  <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/gh/tronic247/material/dist/css/material.min.css" rel="stylesheet" />
</head>

<body class="container p-5">


  <div class="select-container filled">
    <label for="demoselect">Select</label>
    <select id="demoselect">
      <option></option>
      <option value="v">Option 1</option>
      <option value="v">Option 2</option>
      <option value="v">Option 3</option>
      <option value="v">Option 4</option>
      <option value="v">Option 5</option>
    </select>
  </div>


  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/gh/tronic247/material/dist/js/material.min.js"></script>
</body>

</html>