h1 [ id' "foo" ] [ text "bar" ]Tutorial
This is for those who would like to think they know precisely what they mean.
Setup
To begin, complete the setup described in the Getting Started section.
HTML
We begin by exploring html generation in Shpadoinkle.
Shpadoinkle Html is an optional module for generating HTML. Here’s how it
works.
Each HTML tag has an associated named function. For the H1 HTML tag, for
example:
will render as
<h1 id="foo" >bar</h1>Each HTML tag’s associated function accepts 2 arguments: first, a list of the
properties (of type [(Text, Prop m a)]); and second, a list of the children
HTML tags (of type [Html m a]).
Each such named function has 2 additonal versions. Appending an underscore to the named function gives a version of the function that takes no properties. For example:
h1_ [ text "bar" ]will render as
<h1>bar</h1>Appending a prime to the named function gives a version of the function that takes no children. For example:
div' [ id' "mydiv" ]will render as
<div id="mydiv"></div>Text nodes, being extremely common, can be used directly as HTML tags provided
you have enabled the OverloadedStrings compiler pragma. Example:
h1 [ id' "foo" ] [ "bar" ]will render as
<h1 id="foo">bar</h1>(Notice the lack of text "bar".)
CSS Classes
This is by far the most common property to set. Extra affordances are offered. These 3 expressions:
div' "foo bar"
div' [ class' "foo bar" ]
div' [ class' ["foo", "bar"] ]will each render as:
<div class="foo bar"></div>To learn more about the Shpadoinkle Html package, see
the docs.
Events
Event handlers are properties. Event handling is achieved by attaching event handlers as propoprties of HTML elements. There are several named functions for each event type and a few additional helpers.
This JavaScript code
const div = document.createElement("div")
div.addEventListener("click", doit)is obtained from this Shpadoinkle Haskell code:
div' [ onClick doit ]Next, we will use these concepts to build a calculator.