search

matsp / material-components-vue

Material Design styled components for Vue.js
https://matsp.github.io/material-components-vue
MIT License
303 stars 44 forks source link

`Unbounded` modifier for Ripple #596

Open meibegger opened 4 years ago

meibegger commented 4 years ago

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 an unbounded option is already implemented in @material/ripple/_mixins.scss line 49.

Adding data-mdc-ripple-is-unbounded to the element with v-ripple works as expected.

Describe the solution you'd like It would be nice to have a modifier unbounded on the ripple plugin.

tychenjiajun commented 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
tychenjiajun commented 4 years ago

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.

meibegger commented 4 years ago

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.

tychenjiajun commented 4 years ago

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.