Polímero - Colapso de hierro
Los elementos <iron-collapse> se utilizan para contraer un contenido. Para mostrar u ocultar el contenido, use open o toggle ().
La altura máxima / anchura máxima del elemento plegable se ajusta automáticamente mediante el elemento de colapso de hierro.
Las propiedades personalizadas y los mixins que se utilizarán para el peinado son los siguientes:
--iron-collapse-transition-duration- Es la duración de la transición de la animación. El valor predeterminado es 300 ms.
Ejemplo
Para implementar el elemento iron-collapse, navegue a la carpeta de su proyecto en el símbolo del sistema y use los siguientes comandos:
bower install PolymerElements/iron-collapse --save
bower install PolymerElements/paper-toggle-button --save
El comando anterior instala ambos elementos en bower_componentscarpeta. Luego, debe importar ambos archivos en su archivo index.html como se muestra a continuación:
<link rel = "import" href = "iron-collapse/iron-collapse.html">
<link rel = "import" href = "paper-toggle-button/paper-toggle-button.html">
El siguiente ejemplo demuestra el uso del elemento de colapso de hierro:
<!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>
Salida
Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecútelo con el siguiente comando:
polymer serve
Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.
Al hacer clic en el botón de alternancia, la siguiente será la salida.