纸纹不亮

Question

I have this code as a custom element:

<link rel="import" href="../paper-ripple/paper-ripple.html">

<polymer-element name="menu-item">

<template>
    <style>
        :host {
            box-sizing: border-box;
            position: absolute;
            font-size: 16px;
            width:100%;
        }


.center{
   text-align: center;
}
    </style>

        <div class="item">
            <div class="content center" fit>
                <content select="*"></content>
            </div>
            <paper-ripple fit></paper-ripple>
        </div>


</template>

<script>

    Polymer({

    });

</script>

It is instantiated as follows: <menu-item><a href="{{url('#/')}}">Home</a></menu-item>

Problem is, either the ripple fires and the link does not. Or the link fires but the ripple does not.

How should I be doing this?

Thanks, g3

Answer 1

I was able to get it to work by changing your code to create the element to have the anchor tags around the element, like so:

<a href="{{url('#/')}}"><menu-item>site</menu-item></a>

removing select="*" from your content element, and giving your :host style some height. I set mine to height: 32px;

Answer 2

I think the basic problem is that the way you have it structured, the anchor tag and the paper-ripple are siblings, so there's no way for the click event to bubble up from the ripple to the anchor, or vice versa.

One approach would be to have the anchor tag inside your element and use data binding, like so:

<div class="item">
  <a href="{{url}}">
    <div class="content center" fit>
      {{text}}
    </div>
    <paper-ripple fit></paper-ripple>
   </a>
 </div>

...

<menu-item url="{{url('#/')}}" text="Home"></menu-item>

Full demo here:

http://jsbin.com/bumiva/3/edit

Another approach would be to use your original structure and add a click listener on the outer <div> and follow the link manually, like this:

http://jsbin.com/wadiwu/2/edit

Hope this helps.