pureblazor / components

PureBlazor UI Components
https://pureblazor.com
MIT License
42 stars 4 forks source link

Proposal: Ripple effect #57

Open danielchalmers opened 2 months ago

danielchalmers commented 2 months ago

A ripple effect for interactable components:

https://github.com/pureblazor/components/assets/7112040/8edcf692-ef98-4624-aa58-25386974841c

It should originate from the pointer:

https://github.com/pureblazor/components/assets/7112040/2ed017bf-146d-4191-b7aa-fe41253915f3

It should start when the pointer is held and end when the pointer is released (with a minimum of about half a second or so):

https://github.com/pureblazor/components/assets/7112040/25d288c2-d4bd-4bef-ada5-055ded525cf8

And it should be able to ripple multiple times at once:

https://github.com/pureblazor/components/assets/7112040/71222bd7-d705-4f25-9d11-c9502f10ddb0

codymullins commented 2 months ago

I like it - we previously had a "jiggle" effect that had to be temporarily removed, we can probably look at how to enable both of these things with the theming or a PressedStyles parameter.

codymullins commented 2 months ago

Re-added base for this functionality in https://github.com/pureblazor/components/commit/0ca0ffb0df347c67f0c73767d817050375be0340

danielchalmers commented 2 months ago

Re-added base for this functionality in 0ca0ffb

@codymullins Cool! I see onmousedown, onmouseup, onclick (MouseEventArgs) - Does it work with touch? onpointerdown might work better 🤔

codymullins commented 2 months ago

good call - I noticed touch wasn't working correctly when testing from my phone lasts night.