如何在聚合物1.0中使用铁下拉

How to use iron-dropdown in Polymer 1.0?

本文关键字：聚合物      更新时间：2023-09-26

这可能是最简单的，但对我来说，我不知道;他们的网站也不清楚。

我已经更新了我的小屋。使用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>

如果它有帮助，我使用聚合物入门工具包。

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

你是不是错过了dropdown-contentdiv ?

检查demo选项卡并右键单击Basic下拉菜单以查看其结构。同样来自文档页:

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

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

所以你需要提供一种打开它的方式，即使用一个相关的按钮。

我创建了一个示例

<!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>
相关文章：