srcmini<iron-collapse>元素用于折叠内容。你可以使用带有<iron-collapse>元素的open或toggle()来显示或隐藏内容。
可折叠元素的最大高度/最大宽度由铁折叠元素自动调整。
你可以使用自定义属性和mixins来设置<iron-collapse>元素的样式。
–iron-collapse-transition-duration：指定动画过渡的持续时间。默认值为300ms。
例子
打开命令提示符, 然后使用以下命令导航到你的项目文件夹并实现iron-collapse元素。
<p><strong>bower install PolymerElements/iron-collapse --save</strong></p>
<img src="https://static.srcmini02.com/polymerjs/images/iron-collapse1.png" alt="iron collapse 1"/>
<p><strong>bower install PolymerElements/paper-toggle-button --save</strong></p>
<img src="https://static.srcmini02.com/polymerjs/images/iron-collapse2.png" alt="iron collapse 2"/>
<p>This command will install both the elements in bower_components folder and then you can import both files in your index page. </p>
<p><strong>For example:</strong></p>
<div class="codeblock"><textarea name="code" class="html">
<link rel = "import" href = "iron-collapse/iron-collapse.html">
<link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">请参阅以下示例：
<!DOCTYPE html>
<html>
<head>
<title>iron-collapse</title>
<base href = "http://polygit.org/polymer+:master/components/">
<link rel = "import" href = "polymer/polymer.html">
<link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">
<link rel = "import" href = "iron-collapse/iron-collapse.html">
<style>
#coll {
display: flex;
width: 500px;
}
demo-collapse{
border: 2px solid LightGrey;
width: 50%;
}
</style>
</head>
<body>
<h3>Iron Collapse Example</h3>
<dom-module id = "demo-collapse">
<template>
<paper-toggle-button checked = "{{opened}}">Collapse this</paper-toggle-button>
<iron-collapse opened = "[[opened]]">
<div><p>This is polymerjs iron-collapse.</p></div>
</iron-collapse>
</template>
</dom-module>
<script>
Polymer ({
is: 'demo-collapse', });
</script>
<div id = "coll">
<demo-collapse></demo-collapse>
</div>
</body>
</html>输出
评论前必须登录！
注册