(如何)我可以在F#Fable Elmish中更改禁用按钮的字体颜色吗?

时间:2019-07-26 11:24:58

标签: button f# fable-f# elmish

我尝试通过样式颜色设置颜色,但是只有在未禁用颜色时才更改颜色。 是否可以使用Fulma?

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

作为最后的手段,我将使用带分派功能的if条件,并以这种方式使按钮无效。

谢谢。

2 个答案:

答案 0 :(得分:3)

@nilekirk解决方案确实是使用内联样式的正确方法。

但是如果您的应用程序中有很多按钮,它会使代码真正变得冗长。

另一种解决方案是将一些CSS直接应用于所有禁用的按钮,或者如果您不希望所有按钮都具有这种行为,则可以添加自定义类。

应用于应用程序的所有按钮

CSS代码:

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

F#代码:

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

使用自定义类选择哪个按钮应具有这种行为

CSS代码

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

F#代码

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

答案 1 :(得分:1)

如果只想为禁用的情况更改字体颜色,则可以为此生成新样式:

Button.button
    [
        Button.Disabled isDisabled
        Button.Props [
            if isDisabled then yield Style [ Color "#000000" ] ]
        Button.OnClick (fun _ -> dispatch Increment)
    ]
    [ str "Text here" ]

如果要根据禁用状态使用不同的颜色,可以使用if-then-else表达式:

Button.button
    [
        Button.Disabled isDisabled
        Button.Props [
            Style [ (if isDisabled then Color "#000000" else Color "#ffffff") ] ]
        Button.OnClick (fun _ -> dispatch Increment)
    ]
    [ str "Text here" ]