PaackEng / paack-ui / UI.Switch

Accessible and uniform-styled implementation of a switch.

Switch.default "Flying mode."
    Msg.ToggleThis
    True
    |> Switch.withColor Switch.success
    |> Switch.renderElement renderConfig

Building


type Switch msg

The Switch msg type is used for describing the component for later rendering.

default : String -> (Basics.Bool -> msg) -> Basics.Bool -> Switch msg

Defines all the required properties for creating a switch. This default switch is half-opaque black.

Switch.default "Flight mode"
    (Msg.SetFlightMode <| not model.flightModeEnabled)
    model.flightModeEnabled

success : String -> (Basics.Bool -> msg) -> Basics.Bool -> Switch msg

This switch has the success-color, and it's greenish for enforcing success.

Switch.success "Toggle Firewall"
    (Msg.SetFirewall <| not model.hasFirewall)
    model.hasFirewall

danger : String -> (Basics.Bool -> msg) -> Basics.Bool -> Switch msg

This switch has the danger-color, and it's reddish for enforcing the user's attention.

Switch.danger "Toggle root access"
    (Msg.SetRootAccess <| not model.hasRoot)
    model.hasRoot

Rendering

renderElement : UI.RenderConfig.RenderConfig -> Switch msg -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.