arowM / tepa / Tepa.Mixin

Primitives


type alias Mixin =
Tepa.Mixin

Mixin is a set of HTML attributes.

batch : List Mixin -> Mixin

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 ].

none : Mixin

No HTML attributes.

style : String -> String -> Mixin

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._

attribute : String -> String -> Mixin

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

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

Super Common Attributes

class : String -> Mixin

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!

id : String -> Mixin

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

Boolean Attributes

disabled : Basics.Bool -> Mixin

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

boolAttribute : String -> Basics.Bool -> Mixin

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

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

Conditional Functions

when : Basics.Bool -> Mixin -> Mixin

Insert a Mixin only when conditions are met.

unless : Basics.Bool -> Mixin -> Mixin

Insert a Mixin unless conditions are met.

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

Insert a Mixin only when the value actually exists.