(Как) Можно ли изменить цвет шрифта отключенной кнопки в 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 с функцией отправки и, таким образом, не использовал кнопку.

Заранее спасибо.

Answer 1

Решение @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" ]

Answer 2

Если вы хотите изменить цвет шрифта только для отключенного случая, вы можете получить новый стиль для этого:

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