Tepa.Html

Quickly render HTML in Elm.

Examples

The HTML part of a TEPA application looks something like this:

import Tepa.Html as Html exposing (Html)
import Tepa.Mixin as Mixin


view : Layer Memory -> Html
view =
    Tepa.layerView <|
        \{ state, setKey, values } ->
            Html.div []
                [ Html.button
                    [ Mixin.attribute "type" "button"
                    , setKey "button-decrement"
                    ]
                    [ Html.text "-"
                    ]
                , Html.div []
                    [ Html.text (String.fromInt state.count)
                    ]
                , Html.button
                    [ Mixin.attribute "type" "button"
                    , setKey "button-increment"
                    ]
                    [ Html.text "+"
                    ]
                ]


type alias Memory =
    { count : Int
    }

If you call view you get something like this:

<div>
  <button type="button">-</button>
  <div>42</div>
  <button type="button">+</button>
</div>

Primitives

type alias Html =

Html

The core building block used to build up HTML. Here we create an Html value with no attributes and one child:

hello : Html
hello =
    div [] [ text "Hello!" ]

text : String -> Html

Just put plain text in the DOM. It will escape the string so that it appears exactly as you specify.

node : String -> List Mixin -> List Html -> Html

General way to create HTML nodes. It is used to define all of the helper functions in this library.

div : List Mixin -> List Html -> Html
div mixins children =
    node "div" mixins children

You can use this to create custom nodes if you need to create something that is not covered by the helper functions in this library.

The Mixin is bunch of attributes on your Html. Learn more in the Tepa.Mixin module.

keyed : String -> List Mixin -> List ( String, Html ) -> Html

Works just like node, but you add a unique identifier to each child node. You want this when you have a list of nodes that is changing: adding nodes, removing nodes, etc. In these cases, the unique identifiers help make the DOM modifications more efficient.

This is the TEPA version of Html.Keyed.node.

Super Common Tags

div : List Mixin -> List Html -> Html

Represents a generic container with no special meaning.

See MDN document for details.

span : List Mixin -> List Html -> Html

Represents text with no specific meaning.

See MDN document for details.

p : List Mixin -> List Html -> Html

Defines a portion that should be displayed as a paragraph.

See MDN document for details.

a : List Mixin -> List Html -> Html

Represents a hyperlink, linking to another resource.

See MDN document for details.

button : List Mixin -> List Html -> Html

Represents a button.

See MDN document for details.

input : List Mixin -> List Html -> Html

Represents a typed data field allowing the user to edit the data.

See MDN document for details.

textarea : List Mixin -> List Html -> Html

Represents a multiline text edit control.

See MDN document for details.

select : List Mixin -> List Html -> Html

Represents a control allowing selection among a set of options.

See MDN document for details.

option : List Mixin -> List Html -> Html

Represents an option in a select element or a suggestion of a datalist element.

See MDN document for details.

arowM/tepa/3.0.0

Tepa.Html

Examples

Primitives

Super Common Tags

Modules