Blazorise: Change a button's disabled properties

Created on 17 Mar 2020  Â·  4Comments  Â·  Source: stsrki/Blazorise

Is your feature request related to a problem? Please describe.
I've used an instance of the Theme class as described in your documentation to change a variety of display properties.

However, I need to configure a button's disabled properties such as color, background-color and border. Unfortunately, the ThemeButtonOptions don't seem to support this.

Describe the solution you'd like
Ideally I would like to be able to change color, background-color and various border properties depending on whether a button is disabled or not.

Low â™» Feature âš™

All 4 comments

This is sorta Blazor generally rather than Blazorise, but you can set the disabled state like this for example

<button class="btn btn-primary" @onclick="BulkAllocate" disabled=@bulkAllocationButtonDisabled>Bulk Allocate</button>

Code{
    private bool bulkAllocationButtonDisabled = true;
}

Similarly you can set color or anything else through applying a class attribute to the button (or any DOM element for that matter), and then setting the class name in the code:

  <div class="@disabledHoldingDiv">
Stuff to Enable/Disable...
</div>

code{
    private string disabledHoldingDiv = "disabled-div"; //You can clear or read this string to enable/diable the div
}

In css:
.disabled-div {
    pointer-events: none;
    opacity: 0.4;
}

@danlbb Theme generator is currently overriding CSS styles just like it would do if you're building it from scss/less source. For the most part I just use what's already in bootstrap, bulma or any other css framework.

Now regarding the disabled state, I'm missing the opacity level and I can add that one to the options.

But if you want to control color, background etc. you should go with @robalexclark example and add your own styles.

eg.

<Button Color="Color.Primary" Class="my-disabled-button">TEST</Button>
.btn-primary.disabled, .btn-primary:disabled
{
    background-color: blue;
    // etc.
}

Thanks for the feedback. Will use that. This can be closed

I will leave it open. The opacity still needs to be added to the theme options.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sroy2020 picture sroy2020  Â·  5Comments

danielheddelin picture danielheddelin  Â·  5Comments

stsrki picture stsrki  Â·  3Comments

smilyte picture smilyte  Â·  4Comments

john-cullen picture john-cullen  Â·  3Comments