Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Link in paper-item inside paper-menu-button (Polymer-1.0)

update 1: found this issue with pull request which seems to be addressing this issue in Polymer.

update 2: Decided to restructure my layout based on the Polymer Starter Kit which uses page.js instead of app-router, and seems to work well, although they don't use paper-item in paper-menu but instead use custom anchor elements.

Search every bit of documentation but I can't find this (although there is another issue on stackoverflow with almost the same title, not same thing)

TLDR: I need to have to whole paper-item clickable to the link. Not just the text itself. See image below for clarity and here is the live code.

enter image description here.

I've got something like the code below. I'm using link tags in combination with app-router routing which works great. The only problem is: I would like to have have the entire paper-menu-item to be clickable with the link tag.

When I use below code, the right page is retrieved when clicking directly on the link tekst itself, but that doesn't create a "selected" state. When I click on the button (just off the text) then the button IS selected but the page isn't retrieved because I didn't click the link...

There must be an easy way to do this right? I mean, I could force this by overriding all the CSS but it seems to me a link in a paper-item in a paper-menu would be a very common thing which should do this automatically or with an attribute or someting?

<paper-menu class="list">
  <paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
  <paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>

I checked documentation on paper-item, paper-menu and others but those never use an example with a link.

like image 944
Albert Skibinski Avatar asked Jun 12 '15 13:06

Albert Skibinski


1 Answers

IMO, the most clean way is to just drop the links altogether and just add on-tap event.

(You can also use dom-repeat for your menu)

<paper-menu class="list">
  <paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
  <paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>

I'm assuming your are using <a> tags because of app-router.

From app-router doc:

go(path, options) - You can call the router from Javascript to navigate imperatively.

Then you can simple write your own on-tab handler and use custom attribute (mypath) on each <paper-item>

Polymer({
    is: 'your-menu',
    menuSelected: function (e) {
        var mypath = e.currentTarget.getAttribute('mypath'); 
        document.querySelector('app-router').go(mypath);
    },
})();
like image 91
sensor Avatar answered Nov 12 '22 13:11

sensor