arowM / elm-mixin / Mixin

Core module for elm-mixin, which makes it easy to handle conditional attributes, CSS custom properties, and more.

Primitives


type Mixin msg

Developer-friendly alternative to Html.Attribute msg.

fromAttributes : List (Html.Attribute msg) -> Mixin msg

Lower level function to build Mixin from Html.Attributes.

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

map : (a -> b) -> Mixin a -> Mixin b

batch : List (Mixin msg) -> Mixin 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 ].

none : Mixin msg

No HTML attributes.

style : String -> String -> Mixin msg

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.

property : String -> Json.Encode.Value -> Mixin msg

Alternative to Html.Attributes.property.

import Json.Encode as Encode

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

attribute : String -> String -> Mixin msg

Alternative to Html.Attributes.attribute.

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

Super Common Attributes

class : String -> Mixin msg

Alternative to Html.Attributes.class.

id : String -> Mixin msg

Alternative to Html.Attributes.id.

Boolean Attributes

checked : Basics.Bool -> Mixin msg

Alternative to Html.Attributes.checked

selected : Basics.Bool -> Mixin msg

Alternative to Html.Attributes.selected

disabled : Basics.Bool -> Mixin msg

Alternative to Html.Attributes.disabled

boolAttribute : String -> Basics.Bool -> Mixin msg

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

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

boolProperty : String -> Basics.Bool -> Mixin msg

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 on HTML Nodes

lift : (List (Html.Attribute msg) -> a) -> List (Mixin msg) -> a

Apply Mixin on Html functions.

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

Conditional Functions

when : Basics.Bool -> Mixin msg -> Mixin msg

Insert a Mixin only when conditions are met.

unless : Basics.Bool -> Mixin msg -> Mixin msg

Insert a Mixin unless conditions are met.

withMaybe : Maybe a -> (a -> Mixin msg) -> Mixin msg

Insert a Mixin only when the value actually exists.