Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose MAX_RADIUS to public API #27

Open
BLamy opened this issue Jul 9, 2015 · 2 comments
Open

Expose MAX_RADIUS to public API #27

BLamy opened this issue Jul 9, 2015 · 2 comments

Comments

@BLamy
Copy link

BLamy commented Jul 9, 2015

I've had a situation where I was trying to replicate the IOWA's colored ripple effect when changing tabs.

I set my template up sort of like this.

...
: host{
      display: block;
      position: relative;
}
...
  <template>
    <paper-ripple initial-Opacity='1'></paper-ripple>
       <paper-toolbar class="tall" >
         <paper-tabs noink selected="1" selectedindex="1" horizontal center layout>
          <paper-tab id="paper_tab" flex horizontal layout>Home</paper-tab>
          <paper-tab id="paper_tab1" flex horizontal layout active>Phone</paper-tab>
        <paper-tab id="paper_tab2" flex horizontal layout>Activities</paper-tab>
      </paper-tabs>
  </template>

When they clicked the tab I would fire the paper ripple and it would animate across my navbar.

However, The paper ripple would only grow so large. The result was the ripple would grow about less then half way across the paper-toolbar and then the rest of the bar would just change colors (I could use a -webkit-transition to make it slightly better).

By increasing the max radius I was able to get the ripple to give me the effect I wanted.

What i'm proposing is could be used as so

<paper-ripple max-radius='700'></paper-ripple>

or possibly a fill-parent property where the ripple automatically calculates how big it's radius must be in order to fill the entire parent.

@notwaldorf
Copy link
Contributor

There's a redesign of paper-ripple in progress (#63) which will address this issue. Does that work for you?

@stramel
Copy link

stramel commented Apr 27, 2017

@notwaldorf Status update since #63 was closed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants