Polímero - recipiente deslizante de ferro

O <iron-swipeable-container> é um contêiner que troca seus filhos aninhados, ou seja, elementos personalizados ou nativos. A transição padrão é horizontal ou curva, mas você pode modificar a duração e as propriedades da transição.

Você pode desativar o deslizamento usando -

disable-swipe classe - Pode ser usado para desativar o deslize de um único filho.
disable-swipe atributo - pode ser usado para desabilitar a passagem de um contêiner inteiro.

Exemplo

Para implementar o elemento iron-swipeable-container, navegue até a pasta do projeto no prompt de comando e use o seguinte comando -

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

O comando acima instala o elemento iron-swipeable-container na pasta bower_components. Então você tem que importá-lo em seu arquivo index.html conforme mostrado no seguinte comando -

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

O exemplo a seguir demonstra o uso do elemento 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>

Resultado

Para executar o aplicativo, navegue até o diretório do projeto e execute o seguinte comando -

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8081/. A seguir será a saída.

polímero_elementos.htm

↰ Previous page