Polimero - Iron Dropdown

L'elemento <iron-dropdown> viene utilizzato per rivelare il contenuto del menu a discesa nascosto - .dropdown-content. L'implementazione di elementi che utilizzano il ferro a discesa può includere caselle combinate, pulsanti dei menu, selezioni, ecc.

L'elemento <iron-dropdown> mostra gli attributi in cui il file .dropdown-trigger configurato rispetto alla posizione di .dropdown-content.

Esempio

Per implementare l'elemento iron-dropdown, vai alla cartella del tuo progetto nel prompt dei comandi e usa il seguente comando.

bower install PolymerElements/iron-dropdown --save

Il seguente esempio dimostra l'uso dell'elemento 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>

Come mostrato nell'esempio, la classe denominata .dropdown-content sarà nascosta finché non chiami un metodo open su un elemento.

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Quando fai clic sul fileClick me pulsante, verrà visualizzato un menu a discesa.