Change ripple color



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

    <style scoped lang="stylus">
      .q-ripple-animation
        background red
    </style>
    

    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 :smile_cat: .




Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.