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
        ]

The fundamental function type that constructs Html from List of Attributes and Htmls.

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 given Tag function to ensure it would always have default Attributes.

row : Tag msg
row =
    extend [class "row"] div


row [] [ text "hello" ]
    == """<div class="row">hello</div>"""

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