Polymère - Conteneur glaçable en fer

Le <iron-swipeable-container> est un conteneur qui permute ses enfants imbriqués, c'est-à-dire des éléments personnalisés ou natifs. La transition par défaut est une horizontale ou une courbe, mais vous pouvez modifier la durée et les propriétés de la transition.

Vous pouvez désactiver le balayage en utilisant -

  • disable-swipe class - Il peut être utilisé pour désactiver le balayage d'un seul enfant.

  • disable-swipe attribut - Il peut être utilisé pour désactiver le balayage d'un conteneur entier.

Exemple

Pour implémenter l'élément iron-swipeable-container, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante -

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

La commande ci-dessus installe un élément contenant un fer à repasser dans le dossier bower_components. Ensuite, vous devez l'importer dans votre fichier index.html comme indiqué dans la commande suivante -

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

L'exemple suivant montre l'utilisation d'un élément contenant un fer à repasser -

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

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante -

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.