Question

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

我更新了我的bower.json文件以使用Iron Elements的1.0.3版本，导入了铁下拉元素，但是当我有这个时没有显示：

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

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

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

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

如何在Polymer 1.0中使用铁滴？

3 个答案: