Polymerjs iron-collapse元素 _Polymerjs元素

< iron-collapse> 元素用于折叠内容。你可以使用带有< iron-collapse> 元素的open或toggle()来显示或隐藏内容。
【Polymerjs iron-collapse元素】可折叠元素的最大高度/最大宽度由铁折叠元素自动调整。
你可以使用自定义属性和mixins来设置< iron-collapse> 元素的样式。
– iron-collapse-transition-duration：指定动画过渡的持续时间。默认值为300ms。
例子打开命令提示符, 然后使用以下命令导航到你的项目文件夹并实现iron-collapse元素。

< p> < strong> bower install PolymerElements/iron-collapse --save< /strong> < /p> < img src="https://static.srcmini.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.srcmini.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 = "http://www.srcmini.com/iron-collapse/iron-collapse.html"> < link rel = "import" href = "http://www.srcmini.com/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 = "http://www.srcmini.com/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/paper-toggle-button/paper-toggle-button.html"> < link rel = "import" href = "http://www.srcmini.com/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>

输出