Module

Grain.Markup

Re-exports from Grain.Markup.Element

#wbr 

wbr :: VNode

#video 

video :: VNode

#var 

var :: VNode

#ul 

ul :: VNode

#u 

u :: VNode

#track 

track :: VNode

#tr 

tr :: VNode

#time 

time :: VNode

#thead 

thead :: VNode

#th 

th :: VNode

#tfoot 

tfoot :: VNode

#textarea 

textarea :: VNode

#td 

td :: VNode

#tbody 

tbody :: VNode

#table 

table :: VNode

#sup 

sup :: VNode

#summary 

summary :: VNode

#sub 

sub :: VNode

#strong 

strong :: VNode

#span 

span :: VNode

#source 

source :: VNode

#small 

small :: VNode

#select 

select :: VNode

#section 

section :: VNode

#samp 

samp :: VNode

#s 

s :: VNode

#ruby 

ruby :: VNode

#rt 

rt :: VNode

#rp 

rp :: VNode

#q 

q :: VNode

#progress 

progress :: VNode

#pre 

pre :: VNode

#param 

param :: VNode

#p 

p :: VNode

#output 

output :: VNode

#option 

option :: VNode

#optgroup 

optgroup :: VNode

#ol 

ol :: VNode

#object 

object :: VNode

#nav 

nav :: VNode

#meter 

meter :: VNode

#menu 

menu :: VNode

#math 

math :: VNode

#mark 

mark :: VNode

#main_ 

main_ :: VNode

#li 

li :: VNode

#legend 

legend :: VNode

#label 

label :: VNode

#kbd 

kbd :: VNode

#ins 

ins :: VNode

#input 

input :: VNode

#img 

img :: VNode

#iframe 

iframe :: VNode

#i 

i :: VNode

#hr 

hr :: VNode

#header 

header :: VNode

#h6 

h6 :: VNode

#h5 

h5 :: VNode

#h4 

h4 :: VNode

#h3 

h3 :: VNode

#h2 

h2 :: VNode

#h1 

h1 :: VNode

#form 

form :: VNode

#footer 

footer :: VNode

#figure 

figure :: VNode

#figcaption 

figcaption :: VNode

#fieldset 

fieldset :: VNode

#embed 

embed :: VNode

#em 

em :: VNode

#dt 

dt :: VNode

#dl 

dl :: VNode

#div 

div :: VNode

#dfn 

dfn :: VNode

#details 

details :: VNode

#del 

del :: VNode

#dd 

dd :: VNode

#datalist 

datalist :: VNode

#colgroup 

colgroup :: VNode

#col 

col :: VNode

#code 

code :: VNode

#cite 

cite :: VNode

#caption 

caption :: VNode

#canvas 

canvas :: VNode

#button 

button :: VNode

#br 

br :: VNode

#blockquote 

blockquote :: VNode

#bdo 

bdo :: VNode

#bdi 

bdi :: VNode

#b 

b :: VNode

#audio 

audio :: VNode

#aside 

aside :: VNode

#article 

article :: VNode

#address 

address :: VNode

#abbr 

abbr :: VNode

#a 

a :: VNode

Re-exports from Grain.Markup.Handler

#onWheel 

onWheel :: (Event -> Effect Unit) -> VNode -> VNode

#onWaiting 

onWaiting :: (Event -> Effect Unit) -> VNode -> VNode

#onVolumeChange 

onVolumeChange :: (Event -> Effect Unit) -> VNode -> VNode

#onToggle 

onToggle :: (Event -> Effect Unit) -> VNode -> VNode

#onTimeUpdate 

onTimeUpdate :: (Event -> Effect Unit) -> VNode -> VNode

#onSuspend 

onSuspend :: (Event -> Effect Unit) -> VNode -> VNode

#onSubmit 

onSubmit :: (Event -> Effect Unit) -> VNode -> VNode

#onStalled 

onStalled :: (Event -> Effect Unit) -> VNode -> VNode

#onSelect 

onSelect :: (Event -> Effect Unit) -> VNode -> VNode

#onSeeking 

onSeeking :: (Event -> Effect Unit) -> VNode -> VNode

#onSeeked 

onSeeked :: (Event -> Effect Unit) -> VNode -> VNode

#onScroll 

onScroll :: (Event -> Effect Unit) -> VNode -> VNode

#onReset 

onReset :: (Event -> Effect Unit) -> VNode -> VNode

#onRateChange 

onRateChange :: (Event -> Effect Unit) -> VNode -> VNode

#onProgress 

onProgress :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerUp 

onPointerUp :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerOver 

onPointerOver :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerOut 

onPointerOut :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerMove 

onPointerMove :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerLeave 

onPointerLeave :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerEnter 

onPointerEnter :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerDown 

onPointerDown :: (Event -> Effect Unit) -> VNode -> VNode

#onPointerCancel 

onPointerCancel :: (Event -> Effect Unit) -> VNode -> VNode

#onPlaying 

onPlaying :: (Event -> Effect Unit) -> VNode -> VNode

#onPlay 

onPlay :: (Event -> Effect Unit) -> VNode -> VNode

#onPause 

onPause :: (Event -> Effect Unit) -> VNode -> VNode

#onMouseUp 

onMouseUp :: (Event -> Effect Unit) -> VNode -> VNode

#onMouseOver 

onMouseOver :: (Event -> Effect Unit) -> VNode -> VNode

#onMouseOut 

onMouseOut :: (Event -> Effect Unit) -> VNode -> VNode

#onMouseMove 

onMouseMove :: (Event -> Effect Unit) -> VNode -> VNode

#onMouseLeave 

onMouseLeave :: (Event -> Effect Unit) -> VNode -> VNode

#onMouseEnter 

onMouseEnter :: (Event -> Effect Unit) -> VNode -> VNode

#onMouseDown 

onMouseDown :: (Event -> Effect Unit) -> VNode -> VNode

#onLoadedMetadata 

onLoadedMetadata :: (Event -> Effect Unit) -> VNode -> VNode

#onLoadedData 

onLoadedData :: (Event -> Effect Unit) -> VNode -> VNode

#onLoadStart 

onLoadStart :: (Event -> Effect Unit) -> VNode -> VNode

#onLoad 

onLoad :: (Event -> Effect Unit) -> VNode -> VNode

#onKeyUp 

onKeyUp :: (Event -> Effect Unit) -> VNode -> VNode

#onKeyPress 

onKeyPress :: (Event -> Effect Unit) -> VNode -> VNode

#onKeyDown 

onKeyDown :: (Event -> Effect Unit) -> VNode -> VNode

#onInvalid 

onInvalid :: (Event -> Effect Unit) -> VNode -> VNode

#onInput 

onInput :: (Event -> Effect Unit) -> VNode -> VNode

#onFocus 

onFocus :: (Event -> Effect Unit) -> VNode -> VNode

#onError 

onError :: (Event -> Effect Unit) -> VNode -> VNode

#onEnded 

onEnded :: (Event -> Effect Unit) -> VNode -> VNode

#onEmptied 

onEmptied :: (Event -> Effect Unit) -> VNode -> VNode

#onDurationChange 

onDurationChange :: (Event -> Effect Unit) -> VNode -> VNode

#onDrop 

onDrop :: (Event -> Effect Unit) -> VNode -> VNode

#onDragStart 

onDragStart :: (Event -> Effect Unit) -> VNode -> VNode

#onDragOver 

onDragOver :: (Event -> Effect Unit) -> VNode -> VNode

#onDragLeave 

onDragLeave :: (Event -> Effect Unit) -> VNode -> VNode

#onDragEnter 

onDragEnter :: (Event -> Effect Unit) -> VNode -> VNode

#onDragEnd 

onDragEnd :: (Event -> Effect Unit) -> VNode -> VNode

#onDrag 

onDrag :: (Event -> Effect Unit) -> VNode -> VNode

#onDoubleClick 

onDoubleClick :: (Event -> Effect Unit) -> VNode -> VNode

#onCueChange 

onCueChange :: (Event -> Effect Unit) -> VNode -> VNode

#onContextMenu 

onContextMenu :: (Event -> Effect Unit) -> VNode -> VNode

#onClick 

onClick :: (Event -> Effect Unit) -> VNode -> VNode

#onChange 

onChange :: (Event -> Effect Unit) -> VNode -> VNode

#onCancel 

onCancel :: (Event -> Effect Unit) -> VNode -> VNode

#onCanPlayThrough 

onCanPlayThrough :: (Event -> Effect Unit) -> VNode -> VNode

#onCanPlay 

onCanPlay :: (Event -> Effect Unit) -> VNode -> VNode

#onBlur 

onBlur :: (Event -> Effect Unit) -> VNode -> VNode

#onAbort 

onAbort :: (Event -> Effect Unit) -> VNode -> VNode

Re-exports from Grain.Markup.Prop

#wrap 

wrap :: String -> VNode -> VNode

#width 

width :: Int -> VNode -> VNode

#value 

value :: String -> VNode -> VNode

#useMap 

useMap :: String -> VNode -> VNode

#type_ 

type_ :: String -> VNode -> VNode

#title 

title :: String -> VNode -> VNode

#target 

target :: String -> VNode -> VNode

#tabIndex 

tabIndex :: Int -> VNode -> VNode

#style 

style :: String -> VNode -> VNode

#step 

step :: String -> VNode -> VNode

#start 

start :: Int -> VNode -> VNode

#srclang 

srclang :: String -> VNode -> VNode

#srcdoc 

srcdoc :: String -> VNode -> VNode

#src 

src :: String -> VNode -> VNode

#spellcheck 

spellcheck :: Boolean -> VNode -> VNode

#size 

size :: Int -> VNode -> VNode

#shape 

shape :: String -> VNode -> VNode

#selected 

selected :: Boolean -> VNode -> VNode

#scope 

scope :: String -> VNode -> VNode

#sandbox 

sandbox :: String -> VNode -> VNode

#rows 

rows :: Int -> VNode -> VNode

#rowSpan 

rowSpan :: Int -> VNode -> VNode

#reversed 

reversed :: Boolean -> VNode -> VNode

#required 

required :: Boolean -> VNode -> VNode

#rel 

rel :: String -> VNode -> VNode

#readOnly 

readOnly :: Boolean -> VNode -> VNode

#preload 

preload :: String -> VNode -> VNode

#poster 

poster :: String -> VNode -> VNode

#placeholder 

placeholder :: String -> VNode -> VNode

#ping 

ping :: String -> VNode -> VNode

#pattern 

pattern :: String -> VNode -> VNode

#noValidate 

noValidate :: Boolean -> VNode -> VNode

#name 

name :: String -> VNode -> VNode

#multiple 

multiple :: Boolean -> VNode -> VNode

#minLength 

minLength :: Int -> VNode -> VNode

#min 

min :: String -> VNode -> VNode

#method 

method :: String -> VNode -> VNode

#media 

media :: String -> VNode -> VNode

#maxLength 

maxLength :: Int -> VNode -> VNode

#max 

max :: String -> VNode -> VNode

#loop 

loop :: Boolean -> VNode -> VNode

#list 

list :: String -> VNode -> VNode

#lang 

lang :: String -> VNode -> VNode

#kind_ 

kind_ :: String -> VNode -> VNode

#isMap 

isMap :: Boolean -> VNode -> VNode

#id 

id :: String -> VNode -> VNode

#htmlFor 

htmlFor :: String -> VNode -> VNode

#hreflang 

hreflang :: String -> VNode -> VNode

#href 

href :: String -> VNode -> VNode

#hidden 

hidden :: Boolean -> VNode -> VNode

#height 

height :: Int -> VNode -> VNode

#headers 

headers :: String -> VNode -> VNode

#formAction 

formAction :: String -> VNode -> VNode

#enctype 

enctype :: String -> VNode -> VNode

#dropzone 

dropzone :: String -> VNode -> VNode

#draggable 

draggable :: Boolean -> VNode -> VNode

#download 

download :: String -> VNode -> VNode

#disabled 

disabled :: Boolean -> VNode -> VNode

#dir 

dir :: String -> VNode -> VNode

#defaultValue 

defaultValue :: String -> VNode -> VNode

#default 

default :: Boolean -> VNode -> VNode

#dateTime 

dateTime :: String -> VNode -> VNode

#coords 

coords :: String -> VNode -> VNode

#controls 

controls :: Boolean -> VNode -> VNode

#contentEditable 

contentEditable :: Boolean -> VNode -> VNode

#cols 

cols :: Int -> VNode -> VNode

#colSpan 

colSpan :: Int -> VNode -> VNode

#classNames 

classNames :: Array String -> VNode -> VNode

#checked 

checked :: Boolean -> VNode -> VNode

#autoplay 

autoplay :: Boolean -> VNode -> VNode

#autofocus 

autofocus :: Boolean -> VNode -> VNode

#autocomplete 

autocomplete :: String -> VNode -> VNode

#alt 

alt :: String -> VNode -> VNode

#action 

action :: String -> VNode -> VNode

#accessKey 

accessKey :: Char -> VNode -> VNode

#acceptCharset 

acceptCharset :: String -> VNode -> VNode

#accept 

accept :: String -> VNode -> VNode

Re-exports from Grain.UI

#text 

text :: String -> VNode

Create a VNode of text.

#prop 

prop :: String -> String -> VNode -> VNode

Add a property.

#kids 

kids :: Array VNode -> VNode -> VNode

Add children.

#key 

key :: String -> VNode -> VNode

Add a key to a VNode.

#handle 

handle :: String -> (Event -> Effect Unit) -> VNode -> VNode

Bind an event handler.

#fingerprint 

fingerprint :: String -> VNode -> VNode

Add a fingerprint to check equality of a VNode.

If it is same as previous rendered element's one, rendering will be skipped.

#element 

element :: String -> VNode

Create a VNode of specified tag element.

#didUpdate 

didUpdate :: (Element -> Effect Unit) -> VNode -> VNode

Bind didUpdate lifecycle.

#didDelete 

didDelete :: (Element -> Effect Unit) -> VNode -> VNode

Bind didDelete lifecycle.

#didCreate 

didCreate :: (Element -> Effect Unit) -> VNode -> VNode

Bind didCreate lifecycle.

#css 

css :: String -> VNode -> VNode

Define styles with CSS string.

It generates a hash string as class name from CSS string, and the generated class name is used automatically.

justDiv :: VNode
justDiv =
  H.div # H.css styles

styles :: String
styles =
  """
  .& {
    width: 100px;
    height: 100px;
  }
  .&:hover {
    width: 100px;
    height: 100px;
  }
  .&:hover .selected {
    color: blue;
  }
  """

& in the CSS string is replaced with the generated class name, and output it as stylesheet.

Like this:

.gz66dqm {
  width: 100px;
  height: 100px;
}
.gz66dqm:hover {
  width: 100px;
  height: 100px;
}
.gz66dqm:hover .selected {
  color: blue;
}

#component 

component :: Render VNode -> VNode

Create a VNode of component.

#className 

className :: String -> VNode -> VNode

Modules