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/。以下将显示输出。

polymer_elements.htm

打印页面

上一个

下一个