Polymer - Iron Swipable Container

<iron-swipeable-container> 是一个交换其嵌套子元素(即自定义或原生元素)的容器。默认过渡是水平或曲线,但您可以修改过渡的持续时间和属性。

您可以使用 − 禁用滑动

  • disable-swipe 类 − 它可用于禁用单个子元素的滑动。

  • disable-swipe 属性 −它可用于禁用整个容器的滑动。

示例

要实现 iron-swipeable-container 元素,请在命令提示符中导航到您的项目文件夹并使用以下命令 −

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

上述命令在 bower_components 文件夹中安装 iron-swipeable-container 元素。然后您必须将其导入到 index.html 文件中,如以下命令所示 −

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

以下示例演示了 iron-swipeable-container 元素的使用 −

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

输出

要运行应用程序,请导航到您的项目目录并运行以下命令 −

polymer serve

现在打开浏览器并导航到 http://127.0.0.1:8081/。以下是输出。

Iron Swipable Container

polymer_elements.html