Developer-friendly alternative to Html.Attribute msg.

Lower level function to build Mixin from Html.Attributes.

onClick : msg -> Mixin msg
onClick msg =
    Mixin.fromAttributes
        [ Html.Events.onClick msg
        ]

When you need to set a couple HTML attributes only if a certain condition is met, you can batch them together.

greeting : Animal -> Html msg
greeting animal =
    Mixin.div
        [ Mixin.class "greeting"
        , case animal of
            Goat { horns } ->
                Mixin.batch
                    [ Mixin.class "greeting-goat"
                    , Mixin.style "--horns" (String.fromInt horns)
                    ]


            Dog ->
                Mixin.batch
                    [ Mixin.class "greeting-dog"
                    ]


            _ ->
                Mixin.none
        ]
        [ text "Hello!"
        ]

Note1: Mixin.none and Mixin.batch [ Mixin.none, Mixin.none ] and Mixin.batch [] all do the same thing.

Note2: It simply flattens as each item appears; so [ Mixin.batch [ foo, bar ], baz, Mixin.batch [ foobar, foobaz ] ] is reduced to [ foo, bar, baz, foobar, foobaz ].

No HTML attributes.

Specify a style.

greeting : Html msg
greeting =
    Mixin.div
        [ Mixin.style "background-color" "red"
        , Mixin.style "height" "90px"
        , Mixin.style "--min-height" "3em"
        , Mixin.style "width" "100%"
        ]
        [ text "Hello!"
        ]

Unlike Html.Attributes.style, this style can also handle CSS custom properties well.

Alternative to Html.Attributes.property.

import Json.Encode as Encode


class : String -> Mixin msg
class name =
    Mixin.property "className" (Encode.string name)

Alternative to Html.Attributes.attribute.

class : String -> Mixin msg
class name =
    Mixin.attribute "class" name

Alternative to Html.Attributes.class.

Alternative to Html.Attributes.id.

Alternative to Html.Attributes.checked

Alternative to Html.Attributes.selected

Alternative to Html.Attributes.disabled

Create arbitrary bool attribute. The boolAttribute converts the Bool argument into the string "true" or "false".

ariaHidden : Bool -> Mixin msg
ariaHidden =
    boolAttribute "aria-hidden"

Create arbitrary bool property. The boolProperty converts the Bool argument into Json.Encode.Value with Json.Encode.bool.

ariaHiddenProperty : Bool -> Mixin msg
ariaHiddenProperty =
    boolProperty "aria-hidden"

Apply Mixin on Html functions.

view : Html msg
view =
    Mixin.lift Html.div
        [ Mixin.class "foo"
        , Mixin.id "bar"
        ]
        [ Html.text "baz"
        ]

Insert a Mixin only when conditions are met.

Insert a Mixin unless conditions are met.

Insert a Mixin only when the value actually exists.