Change ripple color

  • If you want to change the ripple color of components, you can:

    <style scoped lang="stylus">
        background red

    scope makes the color change local to this .vue file only, removing scope applies everywhere.

  • Admin

    Please note that the ripple takes the color of the text of element you apply it to.

  • @rstoenescu Thanks for the precision. It looks great in most cases, but it’s good to be able to change it to suit special cases.
    Btw is there a way to disable the ripple entirely on a q-btn ?
    I ask this because it seems the ripple is somehow affecting its environment: I have a Modal with layout and a few buttons in the footer toolbar, and whenever I click one of those buttons, the content of the modal gets a scrollbar for a fraction of a second. And since it contains a full width google map, it reacts to the resize and I end up with the map having a grey border on right, the size of what used to be a scrollbar. I can refresh the map somehow, but there’s still a flicker visible. Maybe fixing Ripple would be a better idea, but I could not find where the problem comes from. In the meantime, it would be great if I could disable ripple locally (I really dont wanna use plain old buttons, q-btn is too good of a component).

  • Admin

    I’ll see what I can do when I get back from vacation. Please remind me then as I might forget.

  • I’ll log an issue with a cut-n-paste from here so you find it when you get back. Now go, issues can wait 😸 .

Log in to reply