종이 카드의 입면 특성을 변경하는 방법은 무엇입니까?

Question

내 프로젝트에 폴리머를 사용하고 있는데 사용자가 공중을 떠날 때마다 종이 카드에 그림자를 표시하고 싶지만 종이 카드의 표고 속성을 변경할 수는 없습니다. CSS로 어떻게 할 수 있습니까? 또한, 폴리머 요소의 doc에서 animatedShadow 속성을 보았습니다.

새로운 z 값을 설정할 때 카드 그림자에 애니메이션 효과를 적용하려면 true로 설정하십시오.

이게 무슨 의미입니까? 그림자가 어떻게 움직이는 지 이해할 수 없거나 높이 속성 인 것으로 보이는 종이 카드의 z 값을 어떻게 바꿀 수 있습니까?

카드의 z 깊이, 0-5 .

Answer 1

이렇게 할 수있는 방법이 몇 가지 있습니다. 가장 쉬운 방법은 호버의 상자 그림자 속성을 재정의하는 것입니다. 우리는 순수 CSS와 함께이 작업을 수행 할 수 있습니다 (참고 : 나는 종이 스타일 GitHub의의의 repo 내 shadow.html 스타일 시트에서이 상자 그림자 값을 훔쳐) :

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 
<link href="paper-card/paper-card.html" rel="import"> 
 

 
<hoverable-card></hoverable-card> 
 

 
<dom-module id="hoverable-card"> 
 
    <style> 
 
    paper-card:hover { 
 
     box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 
 
        0 1px 18px 0 rgba(0, 0, 0, 0.12), 
 
        0 3px 5px -1px rgba(0, 0, 0, 0.4) 
 
    } 
 
    </style> 
 
    
 
    <template> 
 
    <paper-card> 
 
     Some content 
 
    </paper-card> 
 
    </template> 
 
    
 
    <script> 
 
    Polymer({ 
 
     is: 'hoverable-card', 
 
    }); 
 
    </script> 
 
</dom-module>

다음 (연루) 방법 종이 카드의 마우스 입력 및 마우스 아웃 이벤트를 사용하는 것입니다. 우리는 카드의 적절한 높이를 설정합니다 콜백을 등록 할 수 있습니다 :

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 
<link href="paper-card/paper-card.html" rel="import"> 
 

 
<hoverable-card></hoverable-card> 
 

 
<dom-module id="hoverable-card"> 
 
    <style> 
 
    </style> 
 
    
 
    <template> 
 
    <paper-card 
 
     animated-shadow 
 
     id="card" 
 
     on-mouseenter="incrementZ" 
 
     on-mouseout="decrementZ"> 
 
     Some content 
 
    </paper-card> 
 
    </template> 
 
    
 
    <script> 
 
    Polymer({ 
 
     is: 'hoverable-card', 
 
     
 
     incrementZ: function() { 
 
     this.$.card.elevation = 5; 
 
     }, 
 
     
 
     decrementZ: function() { 
 
     this.$.card.elevation = 1; 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module>

우리는 또한 shadow.html에서 제공하는 유지 mixin에 액세스 할 수 있습니다

:

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 
<link href="paper-styles/shadow.html" rel="import"> 
 

 

 
<hoverable-card></hoverable-card> 
 

 
<dom-module id="hoverable-card"> 
 
    <style> 
 
    paper-card:hover { 
 
     @apply(--shadow-elevation-16dp); 
 
    } 
 
    </style> 
 
    
 
    <template> 
 
    <paper-card> 
 
     Some content 
 
    </paper-card> 
 
    </template> 
 
    
 
    <script> 
 
    Polymer({ 
 
     is: 'hoverable-card', 
 
    }); 
 
    </script> 
 
</dom-module>

을

어떻게 진행하든,이 기능을 캡슐화하십시오. 자체 웹 구성 요소 내에서! 그런 다음 언제든지 다시 사용할 수 있습니다.