Open meibegger opened 4 years ago
Have you tried
<button v-ripple ref="ripple">Button</button> <!--ref name can be any string-->
this.$refs.ripple.mdcRipple.unbounded = true
If both the js approach and the data-mdc-ripple-is-unbounded
approach work. I don't see the benefit of making it part of the Vue directive.
No I haven't. But i prefer the data-attribute over the JS, because then i have all "options" in one place.
It would be nice to have a consistent way for specifying options and to expose all @material
functionality.
It will be confusing to make it a modifier. Consider the following
<button v-ripple.unbounded ref="ripple">Button</button> <!--ref name can be any string-->
this.$refs.ripple.mdcRipple.unbounded = false
Though the button has unbounded
modifier, it's actually bounded. Make it part of the value will be more reasonable, like
<button v-ripple="{ unbounded: true }">Button</button>
There's might be more things that should be taken into considerations. So this feature won't be implemented soon.
Is your feature request related to a problem? Please describe. In the MDC documentation (https://material.io/develop/web/components/ripples/) they mention, that there is a
radius-unbounded
mixin. When diving deeper into this, i found, that anunbounded
option is already implemented in@material/ripple/_mixins.scss
line 49.Adding
data-mdc-ripple-is-unbounded
to the element withv-ripple
works as expected.Describe the solution you'd like It would be nice to have a modifier
unbounded
on the ripple plugin.