Polymer - Iron Swipable Container

Quiz

The <iron-swipeable-container> is a container that swaps its nested children, i.e. custom or native elements. The default transition is a horizontal or a curve, but you can modify the duration and properties of the transition.

You can disable the swiping using −

disable-swipe class − It can be used to disable swiping of a single child.
disable-swipe attribute − It can be used to disable swiping of a whole container.

Example

To implement iron-swipeable-container element, navigate to your project folder in the command prompt and use the following command −

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

The above command installs iron-swipeable-container element in bower_components folder. Then you have to import it in your index.html file as shown in the following command −

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

The following example demonstrates the use of iron-swipeable-container element −

<!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>

Output

To run the application, navigate to your project directory and run the following command −

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm

Print Page