BlazingMahi Mbutton

This is a customized button implementation for Blazor and Razor Components applications. It provides the ability to disable the button when clicked.

Getting Started

You can install the package via the NuGet package manager just search for BlazingMahi. You can also install via powershell using the following command.

Install-Package BlazingMahi.Mbutton

Add Imports

Add the following to your _Imports.razor or to your razor page files.

@using BlazingMahi.Mbutton

Add Mbutton Component

Mbutton is configured using parameters on the <Mbutton></Mbutton> component. The following options are available.

• Class
• OnClick
• DisableOnClick (Default: false)
• Type (Default: button )
• SpinnerOnDisabled
• SpinnerClass (Default: "spinner-border spinner-border-sm")

Example: add Bootstrap button classes, OnClick event and set the disable to true

<Mbutton Class="btn btn-primary" OnClick="IncrementCount" DisableOnClick="true">Click Me</Mbutton>

<p>Current count: @currentCount</p>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;
    }
}

The above example will disable the button when clicked and then call the IncrementCount() Method

Re-enable the button after a Task is completed.

Using the component reference you have access to two methods. EnableButton() and DisableButton()

<Mbutton Class="btn btn-primary" OnClick="IncrementCount" DisableOnClick="true" @ref="mbutton">Click Me</Mbutton>

@code {
    private int currentCount = 0;
    Mbutton mbutton;

    private async Task IncrementCount()
    {
        await Task.Delay(3000);
        currentCount++;
        mbutton.EnableButton();
    }
}

Add Bootrap Spinner when disabled.

You can add a Bootstap spinner to the button when the button is disabled on click.

• https://getbootstrap.com/docs/4.5/components/spinners/#buttons

<Mbutton Class="btn btn-primary" 
         OnClick="IncrementCount" 
         DisableOnClick="true" 
         SpinnerOnDisabled="true">Click Me</Mbutton>

<p>Current count: @currentCount</p>

@code {
    private int currentCount = 0;  
    private void IncrementCount()
    {        
        currentCount++;       
    }   
}

Set Spinner location

You can set the spinner location on the left (default) , right or only show the spinner.

spinnerPosition="Mbutton.SpinnerPosition.Left"
spinnerPosition="Mbutton.SpinnerPosition.Right"
spinnerPosition="Mbutton.SpinnerPosition.Only"

<Mbutton Class="btn btn-primary" 
         OnClick="IncrementCount" 
         DisableOnClick="true" 
         @ref="mbutton" 
         SpinnerOnDisabled="true" 
         spinnerPosition="Mbutton.SpinnerPosition.Only">Click Me</Mbutton>

<p>Current count: @currentCount</p>

@code {
    private int currentCount = 0;
    Mbutton mbutton;

    private async Task IncrementCount()
    {
        await Task.Delay(3000);
        currentCount++;
        mbutton.EnableButton();
    }
}

You can also overide the default Spinner class

Override with other Bootstrap spinner properties https://getbootstrap.com/docs/4.5/components/spinners/#growing-spinner

<Mbutton Class="btn btn-primary" 
         OnClick="IncrementCount" 
         DisableOnClick="true" 
         SpinnerOnDisabled="true" 
         SpinnerClass="spinner-grow spinner-grow-sm">Click Me</Mbutton>