buttonf#fable-f#elmish

(How) Can I change the font color of a disabled button in F# Fable Elmish?


i tried setting the Color via Style-Color, but it only changes the Color when it's not disabled. Is there a possibility with or without using Fulma?

Button.button
    [
        Button.Disabled true
        Button.Props [
            Style [ Color "#000000" ] ]
        //if … then
        Button.OnClick (fun _ -> dispatch Msg)
    ]
    [ str "Text here" ]

As a last Resort I'd use an if-condition with the dispatch function and in this way putting the button to no use.

Thanks in advance.


Solution

  • @nilekirk solution is indeed the correct way to do it using inlined style.

    But if you have a lot of button in your application, it can make the code really verbose quickly.

    Another solution is to apply some CSS directly to all the disabled button or if you don't want this behavior for all your button you can add a custom class.

    Apply to all the button of the application

    CSS code:

    .button[disabled] {
        background-color: black !important;
    }
    

    F# code:

    Button.button
        [
            Button.Disabled true
            Button.OnClick (fun _ -> dispatch Msg)
        ]
        [ str "Text here" ]
    

    Use a custom class to select which button should have this behavior

    CSS code

    .button.custom-disabled[disabled] {
        background-color: black !important;
    }
    

    F# code

    Button.button
        [
            Button.CustomClass "custom-disabled"    
            Button.Disabled true
            Button.OnClick (fun _ -> dispatch Msg)
        ]
        [ str "Text here" ]