材料设计选择下拉菜单

Posted

技术标签:

【中文标题】材料设计选择下拉菜单【英文标题】：Material Design Select Dropdown 【发布时间】：2014-12-08 08:28:19 【问题描述】：

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

我的问题是：

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

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

【问题讨论】：

为什么不使用链接中的那个？ Polymer 实际上是由 Google 维护的项目，所以在回答您的第一个问题时，Google 不会回避它。 【参考方案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。

【讨论】：

【参考方案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, bodyheight: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>

【讨论】：

你真的画了一个很好的组件。但我不知道为什么当它下面有另一个组件时列表看起来很糟糕。就像如果你每行有两个，你会明白我在说什么。你能（请）提供一些解决方法吗？ =) @RhuanKarlus 已修复，感谢您的关注。我还添加了一个修复程序，在页面点击时关闭已打开的下拉菜单：jsbin.com/kogade/4/edit?html,js,output【参考方案3】：

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

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

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

&lt;link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html"&gt;

【讨论】：

你刚刚给出了两个需要框架作为依赖才能实现的答案 我使用其中之一，它建议那些 :D 只有在看到@Vann'Tile Ianito 的回答之后，我才意识到答案需要在纯 css 中！【参考方案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。

【讨论】：

【参考方案5】：

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

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

【讨论】：

请从链接中添加一些内容 @Vladislava 我试过你的选择。它看起来很棒，效果几乎很好 - 一个问题是，无论我选择什么，组合框的值都保持不变。我从页面复制粘贴了您的示例，无论我选择什么国家，它总是显示“白俄罗斯”。我还在我的项目中导入了 3 个文件：getmdl-select.min.js、getmdl-select.min.css 和 gulpfile.js。我认为这应该是全部......我做错了什么吗？您是否有一些带有简单 html 页面 + 所有必要导入的可下载示例？ @qkx 不要忘记 mdl 原生组件，比如 material.min.css 和 material.min.js。你可以下载简单的例子drive.google.com/file/d/0B6JGsUwJ3Y7bZFcwX1c3b2NFdEE/…【参考方案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>

【讨论】：

以上是关于材料设计选择下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章

VB界面设计中下拉菜单的分隔条怎么做

为啥网页下拉菜单弹不出来

一个字段的列内带有下拉菜单的材料 UI 表

Odoo[12.0] : 如何创建下拉菜单并在下拉菜单中显示所有菜单以及选择多个菜单

网页中的下拉菜单怎样制作

网页下拉菜单怎么设置