ポリマー-鉄スワイプ可能な容器

<iron-swipeable-container>は、ネストされた子をスワップするコンテナーです。カスタム要素またはネイティブ要素。デフォルトのトランジションは水平または曲線ですが、トランジションの期間とプロパティを変更できます。

あなたはを使用してスワイプを無効にすることができます-

disable-swipe クラス-単一の子のスワイプを無効にするために使用できます。
disable-swipe 属性-コンテナ全体のスワイプを無効にするために使用できます。

例

iron-swipeable-container要素を実装するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します-

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

上記のコマンドは、bower_componentsフォルダーにiron-swipeable-containerエレメントをインストールします。次に、次のコマンドに示すように、それをindexlファイルにインポートする必要があります-

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

次の例は、鉄スワイプ可能なコンテナ要素の使用を示しています-

<!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/polymerl">
      <link rel = import" href = iron-swipeable-container/iron-swipeable-containerl">

      <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-iron-swipeable-container

ポリマー-鉄スワイプ可能な容器

例

出力