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 model action Source #

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

className :: MisoString -> Attribute model action Source #

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

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

Define multiple classes

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

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

Define multiple classes conditionally

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

id_ :: MisoString -> Attribute model action Source #

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

title_ :: MisoString -> Attribute model action Source #

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

hidden_ :: Bool -> Attribute model action Source #

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

inert_ :: Bool -> Attribute model action Source #

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

lang_ :: MisoString -> Attribute model action Source #

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

type_ :: MisoString -> Attribute model action Source #

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

value_ :: MisoString -> Attribute model action Source #

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

defaultValue_ :: MisoString -> Attribute model action Source #

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

checked_ :: Bool -> Attribute model action Source #

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

placeholder_ :: MisoString -> Attribute model action Source #

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

selected_ :: Bool -> Attribute model action Source #

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

accept_ :: MisoString -> Attribute model action Source #

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

acceptCharset_ :: MisoString -> Attribute model action Source #

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

action_ :: MisoString -> Attribute model action Source #

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

autocomplete_ :: MisoString -> Attribute model action Source #

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

autofocus_ :: Bool -> Attribute model action Source #

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

autosave_ :: MisoString -> Attribute model action Source #

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

disabled_ :: Attribute model action Source #

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

enctype_ :: MisoString -> Attribute model action Source #

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

formation_ :: MisoString -> Attribute model action Source #

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

list_ :: MisoString -> Attribute model action Source #

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

maxlength_ :: MisoString -> Attribute model action Source #

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

minlength_ :: MisoString -> Attribute model action Source #

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

method_ :: MisoString -> Attribute model action Source #

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

multiple_ :: Bool -> Attribute model action Source #

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

name_ :: MisoString -> Attribute model action Source #

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

noValidate_ :: Bool -> Attribute model action Source #

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

pattern_ :: MisoString -> Attribute model action Source #

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

readonly_ :: Bool -> Attribute model action Source #

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

required_ :: Bool -> Attribute model action Source #

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

size_ :: MisoString -> Attribute model action Source #

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

for_ :: MisoString -> Attribute model action Source #

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

ref_ :: MisoString -> Attribute model action Source #

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

form_ :: MisoString -> Attribute model action Source #

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

max_ :: MisoString -> Attribute model action Source #

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

min_ :: MisoString -> Attribute model action Source #

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

step_ :: MisoString -> Attribute model action Source #

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

cols_ :: MisoString -> Attribute model action Source #

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

rows_ :: MisoString -> Attribute model action Source #

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

wrap_ :: MisoString -> Attribute model action Source #

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

href_ :: MisoString -> Attribute model action Source #

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

target_ :: MisoString -> Attribute model action Source #

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

download_ :: MisoString -> Attribute model action Source #

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

downloadAs_ :: MisoString -> Attribute model action Source #

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

hreflang_ :: MisoString -> Attribute model action Source #

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

media_ :: MisoString -> Attribute model action Source #

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

ping_ :: MisoString -> Attribute model action Source #

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

rel_ :: MisoString -> Attribute model action Source #

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

ismap_ :: Bool -> Attribute model action Source #

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

usemap_ :: MisoString -> Attribute model action Source #

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

shape_ :: MisoString -> Attribute model action Source #

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

coords_ :: MisoString -> Attribute model action Source #

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

src_ :: MisoString -> Attribute model action Source #

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

height_ :: MisoString -> Attribute model action Source #

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

width_ :: MisoString -> Attribute model action Source #

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

alt_ :: MisoString -> Attribute model action Source #

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

loading_ :: MisoString -> Attribute model action Source #

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

autoplay_ :: Bool -> Attribute model action Source #

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

currentTime_ :: Double -> Attribute model action Source #

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

defaultMuted_ :: Bool -> Attribute model action Source #

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

volume_ :: Double -> Attribute model action Source #

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

controls_ :: Bool -> Attribute model action Source #

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

loop_ :: Bool -> Attribute model action Source #

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

defaultPlaybackRate_ :: Double -> Attribute model action Source #

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

mediaGroup_ :: MisoString -> Attribute model action Source #

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

muted_ :: Bool -> Attribute model action Source #

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

playbackRate_ :: Double -> Attribute model action Source #

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

seeking_ :: Bool -> Attribute model action Source #

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

preload_ :: MisoString -> Attribute model action Source #

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

poster_ :: MisoString -> Attribute model action Source #

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

default_ :: Bool -> Attribute model action Source #

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

kind_ :: MisoString -> Attribute model action Source #

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

srclang_ :: MisoString -> Attribute model action Source #

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

sandbox_ :: MisoString -> Attribute model action Source #

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

seamless_ :: MisoString -> Attribute model action Source #

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

srcdoc_ :: MisoString -> Attribute model action Source #

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

reversed_ :: Bool -> Attribute model action Source #

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

align_ :: MisoString -> Attribute model action Source #

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

colspan_ :: MisoString -> Attribute model action Source #

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

rowspan_ :: MisoString -> Attribute model action Source #

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

headers_ :: MisoString -> Attribute model action Source #

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

scope_ :: MisoString -> Attribute model action Source #

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

async_ :: Bool -> Attribute model action Source #

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

charset_ :: MisoString -> Attribute model action Source #

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

content_ :: MisoString -> Attribute model action Source #

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

defer_ :: Bool -> Attribute model action Source #

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

httpEquiv_ :: MisoString -> Attribute model action Source #

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

language_ :: MisoString -> Attribute model action Source #

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

scoped_ :: MisoString -> Attribute model action Source #

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

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

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

autocorrect_ :: Bool -> Attribute model action Source #

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

spellcheck_ :: Bool -> Attribute model action Source #

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

role_ :: MisoString -> Attribute model action Source #

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

xmlns_ :: MisoString -> Attribute model action Source #

Since: 1.9.0.0

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

Since: 1.9.0.0

label_ :: MisoString -> Attribute model action Source #

Since: 1.9.0.0

draggable_ :: Bool -> Attribute model action Source #

Since: 1.9.0.0

frameborder_ :: MisoString -> Attribute model action Source #

Since: 1.9.0.0

scrolling_ :: MisoString -> Attribute model action Source #

Since: 1.9.0.0

tabindex_ :: MisoString -> Attribute model action Source #

tabindex attribute

Since: 1.9.0.0

open_ :: Bool -> Attribute model action Source #

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