Polymer Iron-Collapse

2025 年 3 月 17 日 | 阅读 1 分钟

<iron-collapse> 元素用于折叠内容。你可以使用 opened 或 toggle() 以及 <iron-collapse> 元素来显示或隐藏内容。

可折叠元素的最大高度/最大宽度由 iron-collapse 元素自动调整。

你可以使用自定义属性和 mixin 来设置 <iron-collapse> 元素的样式。

--iron-collapse-transition-duration: 它指定动画过渡的持续时间。其默认值为 300 毫秒。

示例

打开命令提示符并使用以下命令导航到您的项目文件夹并实现 iron-collapse 元素。

<p><strong>bower install PolymerElements/iron-collapse --save</strong></p>
<img src="https://images.tpointtech.com/polymerjs/images/iron-collapse1.png" alt="iron collapse 1"/>
<p><strong>bower install PolymerElements/paper-toggle-button --save</strong></p>
<img src="https://images.tpointtech.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>

输出

下一个主题Iron Image

Polymer Iron-Collapse

示例

请看这个例子

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Polymer 教程

Polymer 元素

App 元素

Iron 元素

Paper 元素

Google 组件

Gold 元素

Neon 元素

Platinum 元素

自定义元素

Shadow DOM & 样式

Polymer 事件

Polymer 数据系统

Polymer 工具

Polymer Iron-Collapse

示例

请看这个例子

相关帖子

Iron 图标

Iron A11y 键

Iron 表单

可滑动容器

Iron 弹性布局

Iron 图像

Iron 元素

Iron Ajax

Iron 下拉

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器