材料设计选择下拉列表-Java 学习之路

我'm trying to create different Form elements that reflect Google'的材料设计原则 . 我注意到我无法在任何地方找到下拉列表示例 . 我能找到的最接近的是Polymer Project .

My questions are:

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

我尝试使用CSS转换正常选择，但这似乎非常棘手 . 另一种选择是使用Javascript和无序列表重新创建选择，但用户（设备和开发人员）如何友好地使用此解决方案？

5 回答

* {
    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如果它有帮助 .

回复于 2024-04-25T22:07:40+08:00

4

你可以得到Material-UI component

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

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

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

回复于 2024-04-25T22:07:40+08:00

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

与此同时，我自己做了"css only" -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 .

回复于 2024-04-25T22:07:40+08:00

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

回复于 2024-04-25T22:07:40+08:00

4

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

你可以在这个页面找到有用的例子http://creativeit.github.io/getmdl-select/

回复于 2024-04-25T22:07:40+08:00

材料设计选择下拉列表

5 回答

相关问题