miso
Copyright(C) 2016-2026 David M. Johnson
LicenseBSD3-style (see the file LICENSE)
MaintainerDavid M. Johnson <code@dmj.io>
Stabilityexperimental
Portabilitynon-portable
Safe HaskellNone
LanguageHaskell2010

Miso.Html.Property

Contents

Description

Overview

Miso.Html.Property provides smart constructors for DOM properties and HTML attributes. Each produces an Attribute that the virtual DOM applies to the corresponding DOM node on every render, diffing only changed values.

All names are suffixed with _ to avoid clashing with Haskell Prelude names. This module is re-exported in its entirety by Miso.Html and Miso.

Quick start

import Miso

view :: Model -> View Model Action
view m =
  div_ [ id_ "app", class_ "container" ]
    [ input_
        [ type_ "text"
        , value_ m.text
        , placeholder_ "Type here…"
        , disabled_
        ]
        []
    , img_
        [ src_ "logo.png", alt_ "Logo", width_ "64", height_ "64" ]
        []
    ]

Class management

Four combinators handle CSS classes:

class_    "foo bar"              -- single string, set className
className "foo bar"              -- alias for class_
classes_  ["foo", "bar"]         -- list of class names
classList_ [("active", isActive)  -- conditional classes
            ,("error",  hasError)]

Property groups

See also

Synopsis

Combinators

class_ :: MisoString -> Attribute action Source #

Set "className" property https://developer.mozilla.org/en-US/docs/Web/API/Element/className

className :: MisoString -> Attribute action Source #

Set "className" property https://developer.mozilla.org/en-US/docs/Web/API/Element/className

classes_ :: [MisoString] -> Attribute action Source #

Define multiple classes

div_ [ classes_ [ "red", "warning" ] ] []

classList_ :: [(MisoString, Bool)] -> Attribute action Source #

Define multiple classes conditionally

div_ [ classList_ [ ("empty", null items) ] [ ]

id_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

title_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

hidden_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

inert_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert

lang_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

type_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/type

value_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/value

defaultValue_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultValue

checked_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked

placeholder_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/placeholder

selected_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#selected

accept_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

acceptCharset_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/acceptCharset

action_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/action

autocomplete_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocomplete

autofocus_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

autosave_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autosave

disabled_ :: Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled

enctype_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

formation_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/formation

list_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/list

maxlength_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/maxlength

minlength_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/minlength

method_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/method

multiple_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/multiple

name_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/name

noValidate_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/noValidate

pattern_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/pattern

readonly_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly

required_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/required

size_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/size

for_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/for

ref_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/ref

form_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/form

max_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/max

min_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/min

step_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/step

cols_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/cols

rows_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/rows

wrap_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/wrap

href_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/href

target_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/target

download_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/download

downloadAs_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/downloadAs

hreflang_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hreflang

media_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/media

ping_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/ping

rel_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/rel

ismap_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/isMap

usemap_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/usemap

shape_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/shape

coords_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/coords

src_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/src

height_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/height

width_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/width

alt_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/alt

loading_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/loading

autoplay_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay

currentTime_ :: Double -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

defaultMuted_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted

volume_ :: Double -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume

controls_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls

loop_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop

defaultPlaybackRate_ :: Double -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate

mediaGroup_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/mediaGroup

muted_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted

playbackRate_ :: Double -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

seeking_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking

preload_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/preload

poster_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/poster

default_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/default

kind_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/kind

srclang_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/srclang

sandbox_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/sandbox

seamless_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/seamless

srcdoc_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/srcdoc

reversed_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol#reversed

align_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/align

colspan_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/colspan

rowspan_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/rowspan

headers_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/headers

scope_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/scope

async_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/async

charset_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/charset

content_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/content

defer_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/defer

httpEquiv_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/httpEquiv

language_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/language

scoped_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/scoped

data_ :: MisoString -> MisoString -> Attribute action Source #

Set "data-*" property https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

autocorrect_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocorrect

spellcheck_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck

role_ :: MisoString -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/role

xmlns_ :: MisoString -> Attribute action Source #

Since: 1.9.0.0

aria_ :: MisoString -> MisoString -> Attribute action Source #

Since: 1.9.0.0

label_ :: MisoString -> Attribute action Source #

Since: 1.9.0.0

draggable_ :: Bool -> Attribute action Source #

Since: 1.9.0.0

frameborder_ :: MisoString -> Attribute action Source #

Since: 1.9.0.0

scrolling_ :: MisoString -> Attribute action Source #

Since: 1.9.0.0

tabindex_ :: MisoString -> Attribute action Source #

tabindex attribute

Since: 1.9.0.0

open_ :: Bool -> Attribute action Source #

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#open