Docs: how to use paper-button as a link about paper-button HOT 22 CLOSED

After thinking about this for a bit, I believe the ideal we should strive for is this form:

<a href="https://www.polymer-project.org">
  <paper-button>Polymer website</paper-button>
</a>

However, there may be problems with this form (e.g., a parent expects a specific kind of child, so wrapping is not an option). Are there any known conditions that you guys have run into where this would not work?

And if we use a declarative , we lost the ripple

I tested this and the ripple seems to work fine in this condition.

from paper-button.

Or use the noink attr if you aren't a fan of the ripple

from paper-button.

@robdodson @ebidel do you have any news about this?

We have the same "problem" with the paper-icon-button.

from paper-button.

Here's one way:

<paper-button onclick="addNewFeature(this)"></paper-button>

function addNewFeature(el) {
  // Wait for ripple to finish.
  el.addEventListener('transitionend', function(e) {
    location.href = '/admin/features/new';
  });
}```

You could also use a declarative `<a>` and prevent the click, wait for the ripple to finish, and then do the redirect.

from paper-button.

+1

from paper-button.

+1

from paper-button.

👍 AKA +1

from paper-button.

With the @ebidel way, we need to write a javascript function...

<paper-button onclick="addNewFeature(this)"></paper-button>

function addNewFeature(el) {
  // Wait for ripple to finish.
  el.addEventListener('transitionend', function(e) {
    location.href = '/admin/features/new';
  });
}

And if we use a declarative <a>, we lost the ripple and maybe it is an ugly code:

<a href="https://www.polymer-project.org">
    <paper-button>Polymer website</paper-button>
</a>

We can have something like this?

<paper-button href="https://www.polymer-project.org">Polymer website</paper-button>

from paper-button.

I don't think href makes sense on paper-button, but it would be nice if paper-button knew it had a anchor children and had a feature that de-janked the ripple for you.

from paper-button.

@ebidel like this?

<paper-button>
    <a href="https://www.polymer-project.org">Polymer website</a>
</paper-button>

from paper-button.

Yes. It would JustWork®️

from paper-button.

@ebidel and we have the same problem with the paper-icon-button.
It would be something like this? An empty <a> is strange.

<paper-icon-button icon="polymer">
    <a href="https://www.polymer-project.org"></a>
</paper-icon-button>

from paper-button.

/sub

from paper-button.

@robdodson @ebidel @abdonrd ^

from paper-button.

That looks fine to me. I would maybe put noink on the button to get rid of
the ripple so it doesn't jank the page.
On Dec 16, 2015 3:15 PM, "Christopher Joel" [email protected]
wrote:

@robdodson https://github.com/robdodson @ebidel
https://github.com/ebidel @abdonrd https://github.com/abdonrd ^

—
Reply to this email directly or view it on GitHub
#35 (comment)
.

from paper-button.

Thanks @cdata!

I can you show an use of case when we have problems: http://jsbin.com/kuyisinara
We have a small problem, easily solved with CSS.
But try to use the tab key and see the focus behavior. :(

The solution would be to add the tabindex="-1" to the as?

from paper-button.

Added an example of this in #91. I decided to leave out the noink attribute since it's nice to see the ripple effect when the user mousedowns (navigation doesn't occur until mouseup).

from paper-button.

@keanulee check the behavior with focus. :/

First tab:

Second tab:

from paper-button.

Ah yes, that is an issue. Easy way to fix this is to add tabindex="-1" to the <a> tag. <paper-button> would still be able to receive focus, and you can still navigate. I'll add this to #91. Thanks @abdonrd

from paper-button.

Nice @keanulee! Your welcome!

from paper-button.

Example has been added in #91

from paper-button.

@keanulee It would be great if you add another example waiting to finish the ripple effect before opening the link. 😊

from paper-button.