Polymère - Liste déroulante de fer

L'élément <iron-dropdown> est utilisé pour révéler le contenu de la liste déroulante cachée - .dropdown-content. L'implémentation d'éléments qui utilise le menu déroulant de fer peut inclure des zones de liste déroulante, des boutons de menu, des sélections, etc.

L'élément <iron-dropdown> affiche les attributs où le .dropdown-trigger configuré par rapport à la position de .dropdown-content.

Exemple

Pour implémenter l'élément iron-dropdown, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante.

bower install PolymerElements/iron-dropdown --save

L'exemple suivant montre l'utilisation de l'élément iron-dropdown -

<!DOCTYPE html>
<html>
   <head>
      <title>iron-dropdown</title>
      <base href = "http://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "iron-dropdown/demo/x-select.html">
      <link rel = "import" href = "paper-input/paper-input.html">
      <link rel = "import" href = "paper-button/paper-button.html">
  
      <style>
         .dropdown-trigger{
            background-color: DarkCyan ;
            border-radius: 4px;
            color: white;
         }
         .dropdown-content {
            background-color: white;
            line-height: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px #ccc;
            padding: 20px;
         }
      </style>
   </head>
  
   <body>
      <h3>Iron-dropdown Example</h3>
      <x-select>
         <paper-button class = "dropdown-trigger">Click Me !</paper-button>
         <div class = "dropdown-content">
            <p>Hello !!! <br/>
            <p>This is an iron-dropdown <br/> example of Polymerjs.</p>
         </div>
      </x-select>
   </body>
</html>

Comme indiqué dans l'exemple, la classe nommée .dropdown-content sera masquée jusqu'à ce que vous appeliez une méthode ouverte sur un élément.

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/. Lorsque vous cliquez sur leClick me bouton, une liste déroulante s'affiche.