Polymère - Effondrement du fer

Les éléments <iron-collapse> sont utilisés pour réduire un contenu. Pour afficher ou masquer le contenu, utilisez open ou toggle ().

La hauteur maximale / largeur maximale de l'élément pliable est automatiquement ajustée par l'élément d'effondrement en fer.

Les propriétés personnalisées et les mixins à utiliser pour le style sont les suivantes -

  • --iron-collapse-transition-duration- C'est la durée de la transition d'animation. La valeur par défaut est de 300 ms.

Exemple

Pour implémenter l'élément iron-collapse, accédez au dossier de votre projet dans l'invite de commande et utilisez les commandes suivantes -

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

La commande ci-dessus installe les deux éléments dans bower_componentsdossier. Ensuite, vous devez importer les deux fichiers dans votre fichier index.html comme indiqué ci-dessous -

<link rel = "import" href = "iron-collapse/iron-collapse.html">
<link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">

L'exemple suivant montre l'utilisation de l'élément fer-effondrement -

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

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante -

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.

Lorsque vous cliquez sur le bouton bascule, ce qui suit sera la sortie.