Core module for elm-mixin, which makes it easy to handle conditional attributes, CSS custom properties, and more.
Developer-friendly alternative to Html.Attribute msg
.
fromAttributes : List (Html.Attribute msg) -> Mixin msg
Lower level function to build Mixin
from Html.Attribute
s.
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
class : String -> Mixin msg
Alternative to Html.Attributes.class
.
id : String -> Mixin msg
Alternative to Html.Attributes.id
.
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"
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"
]
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.