Quickly render HTML in Elm.
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>
Tepa.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 Tepa.Mixin.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 Tepa.Mixin.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
.
div : List Tepa.Mixin.Mixin -> List Html -> Html
Represents a generic container with no special meaning.
See MDN document for details.
span : List Tepa.Mixin.Mixin -> List Html -> Html
Represents text with no specific meaning.
See MDN document for details.
p : List Tepa.Mixin.Mixin -> List Html -> Html
Defines a portion that should be displayed as a paragraph.
See MDN document for details.
a : List Tepa.Mixin.Mixin -> List Html -> Html
Represents a hyperlink, linking to another resource.
See MDN document for details.
button : List Tepa.Mixin.Mixin -> List Html -> Html
Represents a button.
See MDN document for details.
input : List Tepa.Mixin.Mixin -> List Html -> Html
Represents a typed data field allowing the user to edit the data.
See MDN document for details.
textarea : List Tepa.Mixin.Mixin -> List Html -> Html
Represents a multiline text edit control.
See MDN document for details.
select : List Tepa.Mixin.Mixin -> List Html -> Html
Represents a control allowing selection among a set of options.
See MDN document for details.
option : List Tepa.Mixin.Mixin -> List Html -> Html
Represents an option in a select
element or a suggestion of a datalist
element.
See MDN document for details.