ポリマー-鉄の崩壊

<iron-collapse>要素は、コンテンツを折りたたむために使用されます。コンテンツを表示または非表示にするには、openedまたはtoggle（）を使用します。

折りたたみ可能な要素の最大高さ/最大幅は、鉄折りたたみ要素によって自動的に調整されます。

スタイリングに使用されるカスタムプロパティとミックスインは次のとおりです-

*-iron-collapse-transition-duration *-アニメーションの遷移の継続時間です。デフォルト値は300ミリ秒です。

例

iron-collapse要素を実装するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します-

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

上記のコマンドは、 bower_components フォルダーに両方の要素をインストールします。次に、以下に示すように、indexlファイルに両方のファイルをインポートする必要があります-

<link rel = "import" href = "iron-collapse/iron-collapsel">
<link rel = "import" href = "paper-toggle-button/paper-toggle-buttonl">

次の例は、鉄崩壊要素の使用を示しています-

<!DOCTYPE html>
<html>
   <head>
      <title>iron-collapse</title>
      <base href = "http://polygit.org/polymer+:master/components/">
      <link rel = "import" href = "polymer/polymerl">
      <link rel = "import" href = "paper-toggle-button/paper-toggle-buttonl">
      <link rel = "import" href = "iron-collapse/iron-collapsel">

      <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>

出力

アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドで実行します-

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

鉄の崩壊

トグルボタンをクリックすると、次の出力が表示されます。

鉄の崩壊

Polymer-iron-collapse

ポリマー-鉄の崩壊

例

出力