Halogen HTML
HTML要素を表す関数群
e.g.
HH.button , HH.div Halogen HTMLは状態などは持てない
2つの引数
attr, props, event handler
children
属性がないときはアンダーバー付きの関数を使えば省略できる
以下2つは同じ.pursdiv_ [ children ]
div [] [ children ]ちょっと気をつけるところ
purs(hs)import Halogen.HTML as HH
import Halogen.HTML.Properties as HP
element :: forall w i. HH.HTML w i
element =
HH.div
[ HP.id "root" ]
[ HH.input
[ HP.placeholder "Name" ]
, HH.button
[ HP.classes [ HH.ClassName "btn-primary" ]
, HP.type_ HP.ButtonSubmit
]
[ HH.text "Submit" ]
]htmlの
class は HP.classes [] HH.ClassName というnewtypeを使う HP にあっても良い気がするんだけどbuttonのtypeもnewtypeを使う
何も考えてないと
HP.type "submit" と書いちゃう HH.input はchildrenを取らない1引数関数第2引数書くとコンパイルエラーになる
型
DOM内のeventに応答しないHTMLの場合に使う
HH.HTML w i と書かずに、より制限の強い PlainHTML を使うただし、
fromPlainHTML で変換しないといけない場合が出てくる使っているのを見たことがない
IProp HP. 系のproperty関数を誤ったHTML要素に指定できないように働く独自のカスタム要素を作るときのComponentとの関係が少し分かりづらい
状態を持たなければ、HTMLで作るのか？
Componentで作っても同様のことはできる
letとconstの使い分けの明示みたいな感じになるのか？
参考
公式docs