Polimero - Contenitore scorrevole in ferro

<iron-swipeable-container> è un contenitore che scambia i suoi figli nidificati, cioè elementi personalizzati o nativi. La transizione predefinita è orizzontale o curva, ma puoi modificare la durata e le proprietà della transizione.

Puoi disabilitare lo scorrimento usando -

  • disable-swipe class - Può essere utilizzato per disabilitare lo scorrimento di un singolo bambino.

  • disable-swipe attributo - Può essere utilizzato per disabilitare lo scorrimento di un intero contenitore.

Esempio

Per implementare l'elemento iron-swipeable-container, vai alla cartella del tuo progetto nel prompt dei comandi e usa il seguente comando:

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

Il comando precedente installa l'elemento iron-swipeable-container nella cartella bower_components. Quindi devi importarlo nel tuo file index.html come mostrato nel seguente comando:

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

L'esempio seguente mostra l'uso dell'elemento contenitore a scorrimento in ferro -

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

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando:

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.