Polímero - Menú desplegable de hierro
El elemento <iron-dropdown> se utiliza para revelar el contenido desplegable oculto: .dropdown-content. La implementación de elementos que utiliza el menú desplegable de hierro puede incluir cuadros combinados, botones de menú, selecciones, etc.
El elemento <iron-dropdown> muestra los atributos donde .dropdown-trigger configurado en relación con la posición de .dropdown-content.
Ejemplo
Para implementar el elemento desplegable de hierro, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando.
bower install PolymerElements/iron-dropdown --save
El siguiente ejemplo demuestra el uso del elemento desplegable de hierro:
<!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>
Como se muestra en el ejemplo, la clase llamada .dropdown-content estará oculta hasta que llame a un método abierto en un elemento.
Salida
Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando.
polymer serve
Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Cuando haces clic en elClick me , se mostrará un menú desplegable.