Minimal reusable functions to enrich common use of elm/html.
List (Html.Attribute msg) -> children -> Html msg
A type of function which constructs Html
node with given msg
and children
.
This is merely an synonym for those values reside in elm/html
,
which you must be already familiar with.
You can use this to make a little statement about what type does your custom view function would accept as child node.
type alias CardProp msg =
{ title : String
, body : Html msg
}
card : CustomTag (CardProp msg) msg
card attributes { title, body } =
div
(class "card" :: attributes)
[ span [ text title ]
, body
]
CustomTag (List (Html msg)) msg
The fundamental function type that constructs Html
from List
of Attribute
s and Html
s.
Frankly, this package is all about defining your own Tag msg
values, with as fewer keystrokes as possible.
import Html exposing (..)
myTag : Tag msg
myTag =
div
extend : List (Html.Attribute msg) -> Tag msg -> Tag msg
Extend given Tag
function to ensure it would always have default Attribute
s.
row : Tag msg
row =
extend [class "row"] div
row [] [ text "hello" ]
== """<div class="row">hello</div>"""
wrap : (List (Html msg) -> Html msg) -> Tag msg -> Tag msg
Wraps another node so that it would be rendered inside the wrapper
node.
wrapper : Tag msg
wrapper =
span
|> wrap (div [ class "wrapper" ])
wrapper [] [ text "in depth" ]
== """
<div class="wrapper">
<span>in depth</span>
</div>
"""
wrapDeep : List (List (Html msg) -> Html msg) -> Tag msg -> Tag msg
wrapDeep
plants resulting view of given tag
into deeply nested structure.
The first element in given outerNodes
list would come topmost.
postItem : Tag msg
postItem =
p
|> extend [ class "post-item" ]
|> wrapDeep
[ (div [ class "post-wrapper" ])
, (article [ class "post-body" ])
]
postItem [] [ text "New blog!" ]
== """
<div class="post-wrapper">
<article class="post-body">
<p class="post-item">New blog!</p>
</article>
</div>
"""