Polímero - Contenedor deslizable de hierro

El <iron-swipeable-container> es un contenedor que intercambia sus elementos secundarios anidados, es decir, elementos personalizados o nativos. La transición predeterminada es una horizontal o una curva, pero puede modificar la duración y las propiedades de la transición.

Puede deshabilitar el deslizamiento usando -

disable-swipe clase: se puede usar para deshabilitar el deslizamiento de un solo niño.
disable-swipe atributo: se puede usar para deshabilitar el deslizamiento de un contenedor completo.

Ejemplo

Para implementar el elemento contenedor deslizable de hierro, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando:

bower install PolymerElements/iron-swipable-container --save

El comando anterior instala el elemento iron-swipeable-container en la carpeta bower_components. Luego debe importarlo en su archivo index.html como se muestra en el siguiente comando:

<link rel = "import" href = "iron-swipable-container/iron-swipable-container.html">

El siguiente ejemplo demuestra el uso del elemento contenedor deslizable de hierro:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-swipable-container</title>
      <base href = https://polygit.org/polymer+1.4.0/components/">
      <script src = webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = import" href = polymer/polymer.html">
      <link rel = import" href = iron-swipeable-container/iron-swipeable-container.html">

      <style>
         .content {
            background-color: LightGrey;
            width: 16%;
            padding: 10px 10px 10px 10px; 
         }
      </style>
   </head>

   <body>
      <h2>Iron-Swipable-Container Example</h2>
      <iron-swipeable-container>
         <div class = content">Swipe me left or right</div>
      </iron-swipeable-container>
   </body>
</html>

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/. Lo siguiente será la salida.

↰ Previous page