如何在聚合物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-content
div ?
检查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>
相关文章:
- 用于搜索的聚合物嵌套绑定
- 聚合物0.5.5:核心列表中的条件模板和/或模板动态参考
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- 如何在模板聚合物中使用元素函数
- 聚合物dom重复问题
- 聚合物是一个框架而不是一个库.如何模块化地使用web组件
- 聚合物铁形式验证至少选中一个复选框
- 玻璃鱼服务器和聚合物
- 聚合物:在不同的视图模型中多次使用元素
- 聚合物-dom重复的起始指数
- 聚合物绑定条件属性和求值属性
- 如何动态创建聚合物元素
- AngularJS+IE 11+聚合物=ng模型未更新
- 如何使用javascript独立地为聚合物自定义元素的每个实例的lightdom设置样式
- 镀铬延长件内部的聚合物纸按钮不起作用
- 造型:主机的聚合物元素与Javascript
- 在Firefox上使用聚合物的javascript依赖关系的HTML导入困难;Safari
- yeoman generator聚合物的web组件测试失败
- 聚合物+流星,在火焰#每个循环中,无法将对象传递到聚合物网组件
- 聚合物-如何从<a>标签