폴리머 2 : PaperCard 헤더의 클릭 처리

Question

<paper-card> 요소가 포함 된 맞춤 요소가 있습니다. 해당 요소의 헤더 (예 : <div class="header"> 요소)에 대한 클릭을 듣고 싶습니다.

내 현재 솔루션이

<paper-card heading="[[title]]" on-tap="onCardClick"> 
    ... 
</paper-card> 

onCardClick(e){ 
    if(e.path[0].classList.contains('header') || e.path[0].classList.contains('title-text')){ 
     // Header was clicked 
    } 
} 

처럼 보이지만 그것은 해키 느낀다.

더 좋은 방법이 있나요?

Answer 1

내가 원래 CSS와

<paper-card> 
    <div class="header" on-click="onCardClick"> 
    <div class="title-text">[[title]]</div> 
    </div> 
</paper-card> 

같은 헤더 요소를 분리 제안 :

.header { 
    position: relative; 
    border-top-left-radius: inherit; 
    border-top-right-radius: inherit; 
    overflow: hidden; 
} 

.title-text { 
    padding: 16px; 
    font-size: 24px; 
    font-weight: 400; 
    color: var(--paper-card-header-color, #000); 
} 

그것은 당신이 heading 속성을 사용하지만, 더 유연와 완전히 같은 결과가됩니다.