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