폴리머로 웨이브로 카드 만들기

Question

나는 폴리머를 배우려고 노력하며 지금까지는 좋은 방법이라고 생각합니다. 그러나 동일한 Google Material Design이있는 프레임 워크를 발견했으며 Polymer 코드에 대한 자습서를 구현하려고합니다.

프레임 워크는 다음과 같습니다 http://materializecss.com/ 내가 구현하려고 구성 요소가 나는 그것이

<div class="col l4 m4 s1"> 
    <div class="card"> 
     <div class="card-image waves-effect waves-block waves-light"> 
      <img class="responsive-img" src="/static/images/myimage.png"> 
     </div> 
     <div class="card-content"> 
      <span class="card-title activator grey-text text-darken-4">Training Estimation <i class="mdi-navigation-more-vert right"></i></span> 
      <p><a href="#">This is a link</a></p> 
     </div> 
     <div class="card-reveal"> 
      <span class="card-title grey-text text-darken-4">Card Title <i class="mdi-navigation-close right"></i></span> 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
     </div> 
    </div> 
</div> 

그러나 materializecss에 있어야하는 방법의 코드를 가지고있는 Card reveal

, 나는 방법을 모른다 Polymer에서 동일한 기능을 직접 시작하고 다시 작성하십시오.

Answer 1

폴리머 core-animated-pages을 사용하여 수행 할 수 있습니다.

데모 및 코드 : https://github.com/DinethH/card-reveal

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/paper-shadow/paper-shadow.html"> 
<link rel="import" href="../../bower_components/font-roboto/roboto.html"> 
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html"> 
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-up.html"> 
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-down.html"> 
<link rel="import" href="../../bower_components/core-animated-pages/transitions/cross-fade.html"> 

<polymer-element name="card-reveal" center layout> 
<template> 
    <style> 
     paper-shadow, 
     core-animated-pages section { 
      height: 500px; 
      width: 500px; 
     } 
     core-animated-pages section { 
      overflow: hidden; 
     } 
     h3 { 
      font-weight: 300; 
      font-size: 26px; 
      margin: 0; 
      padding: 0; 
      padding-bottom: 10px; 
     } 
     .card-content, 
     .card-reveal { 
      padding: 20px; 
      background: white; 
      height: 500px; 
     } 
     a { 
      color: orange; 
      text-transform: uppercase; 
     } 
    </style> 
<paper-shadow> 
     <core-animated-pages transitions="slide-up" selected="{{selected}}"> 
      <section> 
       <div> 
        <img src="http://lorempixel.com/500/380/"> 
        <div> 
         <div class="card-content"> 
          <div layout horizontal> 
           <div flex> 
            <h3>{{item.title}}</h3> 
           </div> 
           <div> 
            <paper-icon-button on-tap="{{reveal}}" icon="more-vert"></paper-icon-button> 
           </div> 
          </div> 
          <a>This is a link</a> 
         </div> 
        </div> 
       </div> 
      </section> 
      <section> 
       <div class="card-reveal" slide-up cross-fade> 
        <div layout horizontal> 
         <div flex> 
          <h3>{{item.title}}</h3> 
         </div> 
         <div> 
          <paper-icon-button on-tap="{{reveal}}" icon="close"></paper-icon-button> 
         </div> 
        </div> 
        <div> 
         {{item.more}} 
        </div> 
       </div> 
      </section> 
     </core-animated-pages> 
    </paper-shadow> 
</template> 

<script> 
    Polymer({ 
     created: function() { 
      this.item = { 
       title: "Card Title", 
       more: "Here is some more information about this product that is only revealed once clicked on." 
      }; 
     }, 
     reveal: function() { 
      if (this.selected == 0) { 
       this.selected = 1; 
      } else { 
       this.selected = 0; 
      } 
     } 
    }); 
</script> 

</polymer-element>