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

【问题标题】：How to use iron-dropdown in Polymer 1.0?如何在 Polymer 1.0 中使用 iron-dropdown？
【发布时间】：2015-07-30 17:05:26
【问题描述】：

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

我已经更新了我的 bower.json 文件以使用 Iron Elements 的 1.0.3 版，导入了 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>

如果有帮助，我正在使用 Polymer Starter Kit。

【问题讨论】：

标签： javascript polymer polymer-1.0

【解决方案1】：

我想我会自己回答这个问题，因为这是用更少的代码。显然你需要<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>

【讨论】：

【解决方案2】：

你不是错过了dropdown-content div 吗？

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

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

这是他们演示基本按钮的代码。

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

【讨论】：

我正在查看它，但...不确定这是正确的方法。那么<iron-dropdown></iron-dropdown>在哪里以及如何正确使用呢？好像我需要写一个函数？
我没有用它编码，但根据我看到的你做了一个触发器（在这种情况下是类"dropdown-trigger"的按钮），然后你在里面制作“iron-dropdown”div你把你的列表（ ul 与 "dropdown-content" 类）我认为你不需要一个函数，因为它看起来很像引导程序。注意你使用了 <iron-dropdown> 并且示例使用了 <div class="iron-dropdown">跨度>
忽略关注部分。

【解决方案3】：

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

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

我已经创建了一个示例

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

【讨论】：

嗨。你能不能把它给我，因为它对我不起作用？
这个问题很少。 1：内容只隐藏在chrome中，不在firefox中。选择内容后，没有任何变化（在 chrome 中）。我认为他们的元素还没有准备好投入生产。