Closed robdodson closed 8 years ago
+1
+1
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.
Or use the noink
attr if you aren't a fan of the ripple
:+1: AKA +1
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>
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.
@ebidel like this?
<paper-button>
<a href="https://www.polymer-project.org">Polymer website</a>
</paper-button>
Yes. It would JustWork:registered:
@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>
@robdodson @ebidel do you have any news about this?
We have the same "problem" with the paper-icon-button
.
/sub
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.
@robdodson @ebidel @abdonrd ^
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" notifications@github.com 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 https://github.com/PolymerElements/paper-button/issues/35#issuecomment-165279432 .
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 a
s?
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 mousedown
s (navigation doesn't occur until mouseup
).
@keanulee check the behavior with focus. :/
First tab:
Second tab:
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
Nice @keanulee! Your welcome!
Example has been added in #91
@keanulee It would be great if you add another example waiting to finish the ripple effect before opening the link. :blush:
Element doc should include an example of wrapping the button in an anchor so it can be used as a link.