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.

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

ariaHidden : Bool -> Mixin msg
ariaHidden =
    boolAttribute "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.