ポリマー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属性を使用するとまったく同じ効果を持っていますが、より柔軟です。