I can't seem to solve this without using integers or different class or event names per button (which isn't scalable). I have a custom ripple-effect that I've created in Blazor and need each button on the page to receive a "ripple" class when clicked and then remove that class after a second or two.
@using System.Timers<button class="primary-btn @buttonClass" @onclick="AddRipple">Action 1</button><button class="primary-btn @buttonClass" @onclick="AddRipple">Action 2</button>
@code { // Set Ripple Class private string buttonClass = ""; private void AddRipple() { buttonClass = "ripple"; StartTimer(); } private void StartTimer() { var timer = new Timer(1000); timer.Elapsed += RemoveClass; timer.AutoReset = false; timer.Start(); } private void RemoveClass(object source, ElapsedEventArgs e) { buttonClass = ""; ((Timer)source).Dispose(); InvokeAsync(StateHasChanged); }}
I have created and tested this functionality, but it applies the class change to every button on the page when any one button is clicked. How can I make the event fire and apply only the class change on the actual button clicked?
--UPDATE--I created a custom razor component and that worked beautifully. I should have realized that! DOH!Here is a step by step guide if anyone is new at this like me:https://toxigon.com/building-reusable-components-in-blazor