（如何）我可以更改 F# Fable Elmish 中禁用按钮的字体颜色吗？

Question

我尝试通过 Style-Color 设置颜色，但它只会在未禁用时更改颜色。是否有可能使用或不使用 Fulma？

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

作为最后的手段，我会使用 if-condition 和 dispatch 函数，这样就可以让按钮失效。

提前致谢。

Answer 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" ]

Answer 2

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

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

另一个解决方案是将一些 CSS 直接应用于所有禁用的按钮，或者如果您不希望所有按钮都出现这种行为，您可以添加自定义 class.

应用到应用的所有按钮

CSS代码：

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

F#代码：

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

使用自定义 class 到 select 哪个按钮应该有此行为

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" ]

（如何）我可以更改 F# Fable Elmish 中禁用按钮的字体颜色吗？

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

f#

button

fable-f#

elmish