polymer iron崩塌 - 芒果文档

📌 相关文章

📜 polymer iron崩塌

📅 最后修改于: 2021-01-08 00:36:59 🧑 作者: Mango

高分子铁崩解

元素用于折叠内容。您可以使用带有元素的open或toggle()来显示或隐藏内容。

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

您可以使用自定义属性和mixins来设置元素的样式。

–iron-collapse-transition-duration：指定动画过渡的持续时间。默认值为300ms。

例

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

bower install PolymerElements/iron-collapse --save

bower install PolymerElements/paper-toggle-button --save

This command will install both the elements in bower_components folder and then you can import both files in your index page. 
For example:
<link rel = "import" href = "iron-collapse/iron-collapse.html">
<link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">
</span></code></pre>
</div>
<h4>请参阅以下示例：</h4>
<div class="hcb_wrap">
<pre class="prism line-numbers lang-python" data-lang="Java"><code><span <="" span="" style="font-size: 10pt"><!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>
</span></code></pre>
</div>
<p><strong>输出：</strong></p>
<p><img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/javatpoint/iron-collapse3.png"/><br/>
<img class="img-fluid" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com/front_eng_imgs/javatpoint/javatpoint/iron-collapse4.png"/></p>

                </div>

            </div>
        </div>
    </div>
</div>


  
<footer>
    <div class="bg-white text-center pb-1">
        <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有
            <br>

            <a href="https://beian.miit.gov.cn/" target="_blank"
                class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a>

            <br>
            Made with ❤️ in Chengdu
        </p>
    </div>
</footer>


  <!-- 引入Bootstrap JavaScript库 -->
  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>

  <!-- 引入Meilisearch搜索相关的JavaScript库 -->
  <script
    src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
  <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>

  <!-- 引入prismjs代码高亮相关的JavaScript库 -->
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

</body>


</html>