Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4055

Add Class When Button Is Clicked While Other Buttons Are Present On Page In Blazor

$
0
0

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


Viewing all articles
Browse latest Browse all 4055

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>