Mixin is a set of HTML attributes.

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

import Tepa.Html as Html exposing (Html)
import Tepa.Mixin as Mixin


greeting : Animal -> Html
greeting animal =
    Html.div
        [ Mixin.class "greeting"
        , case animal of
            Goat { horns } ->
                Mixin.batch
                    [ Mixin.class "greeting-goat"


                    -- CSS custom properties
                    , 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.

import Tepa.Html as Html exposing (Html)
import Tepa.Mixin as Mixin


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

This style can also handle CSS custom properties well._

Create attributes, like saying domNode.setAttribute('class', 'greeting') in JavaScript.

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

Often used with CSS to style elements with common properties.

Note: You can have as many class attributes as you want. They all get applied, so if you say [ class "notice", class "notice-seen" ] you will get both classes!

Often used with CSS to style a specific element. The value of this attribute must be unique.

Indicates whether the user can interact with a button, fieldset, input, optgroup, option, select or textarea.

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

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

Insert a Mixin only when conditions are met.

Insert a Mixin unless conditions are met.

Insert a Mixin only when the value actually exists.