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.