如何在 Polymer 1.0 中使用 iron-dropdown？

Question

这可能是最简单的，但对我来说我不知道； their website也不清楚

我已经更新了我的 bower.json 文件以使用 1.0.3 版的 Iron Elements，导入了 iron-dropdown 元素，但是当我有这个时没有任何显示：

  <iron-dropdown>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </iron-dropdown>

我是不是漏掉了什么？

编辑：

这也什么都没显示：

<iron-dropdown horizontal-align="right" vertical-align="top">
  <div class="dropdown-content">Hello!</div>
</iron-dropdown>

如果有帮助，我正在使用聚合物入门套件。

Answer 1

你没有错过 dropdown-content div 吗？

检查演示选项卡并右键单击“基本”下拉菜单以查看其结构。也来自文档页面：

<iron-dropdown horizontal-align="right" vertical-align="top">
  <div class="dropdown-content">Hello!</div>
</iron-dropdown>

这是他们的演示 Basic Button 中的代码。

<button class="dropdown-trigger">Basic</button>
<div class="style-scope iron-dropdown" id="contentWrapper">
  <ul class="dropdown-content">
    <li><a href="javascript:void(0)">alpha</a></li>
    <li><a href="javascript:void(0)">beta</a></li>
    <li><a href="javascript:void(0)">gamma</a></li>
    <li><a href="javascript:void(0)">delta</a></li>
    <li><a href="javascript:void(0)">epsilon</a></li>
  </ul>
</div>

Answer 2

下拉元素初始显示状态隐藏。

因此您需要提供一种打开方式，即使用相关按钮。

我创建了一个示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/iron-dropdown/iron-dropdown.html">
    <title>Dropdown Polymer minimal sample</title>
</head>
<body>
<paper-button>flat button</paper-button>
<iron-dropdown horizontal-align="right" vertical-align="top">
    <div class="dropdown-content">This is the content inside the dropdown!</div>
</iron-dropdown>

<script>
    var button=  document.querySelector('paper-button');
    button.addEventListener('click', function(e) {
        var dropdown = document.querySelector('iron-dropdown');
        dropdown.open();
    });
    window.addEventListener('WebComponentsReady', function(e) {
        var dropdown = document.querySelector('iron-dropdown');
        dropdown.close();
    });

</script>

Answer 3

我想我会自己回答这个问题，因为代码更少。显然你需要 <iron-dropdown> 本身的 id 然后调用函数 show 显示隐藏的内容：

<button on-click="show">Click me</button>
<iron-dropdown id="showMenu" horizontal-align="right" vertical-align="top">
  <div class="dropdown-content">Hello!</div>
</iron-dropdown>

<script>
 show: function() {
 this.$.showMenu.toggle();
 }
</script>

如何在 Polymer 1.0 中使用 iron-dropdown？

How to use iron-dropdown in Polymer 1.0?

javascript

polymer

polymer-1.0