Module

Grain.Markup.Prop

Package: purescript-grain
Repository: purescript-grain/purescript-grain

#css Source

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;
}

#style Source

style :: String -> VNode -> VNode

#className Source

className :: String -> VNode -> VNode

#classNames Source

classNames :: Array String -> VNode -> VNode

#id Source

id :: String -> VNode -> VNode

#title Source

title :: String -> VNode -> VNode

#hidden Source

hidden :: Boolean -> VNode -> VNode

#type_ Source

type_ :: String -> VNode -> VNode

#value Source

value :: String -> VNode -> VNode

#defaultValue Source

defaultValue :: String -> VNode -> VNode

#checked Source

checked :: Boolean -> VNode -> VNode

#placeholder Source

placeholder :: String -> VNode -> VNode

#selected Source

selected :: Boolean -> VNode -> VNode

#accept Source

accept :: String -> VNode -> VNode

#acceptCharset Source

acceptCharset :: String -> VNode -> VNode

#action Source

action :: String -> VNode -> VNode

#autocomplete Source

autocomplete :: String -> VNode -> VNode

#autofocus Source

autofocus :: Boolean -> VNode -> VNode

#disabled Source

disabled :: Boolean -> VNode -> VNode

#enctype Source

enctype :: String -> VNode -> VNode

#formAction Source

formAction :: String -> VNode -> VNode

#list Source

list :: String -> VNode -> VNode

#maxLength Source

maxLength :: Int -> VNode -> VNode

#minLength Source

minLength :: Int -> VNode -> VNode

#method Source

method :: String -> VNode -> VNode

#multiple Source

multiple :: Boolean -> VNode -> VNode

#name Source

name :: String -> VNode -> VNode

#noValidate Source

noValidate :: Boolean -> VNode -> VNode

#pattern Source

pattern :: String -> VNode -> VNode

#readOnly Source

readOnly :: Boolean -> VNode -> VNode

#required Source

required :: Boolean -> VNode -> VNode

#size Source

size :: Int -> VNode -> VNode

#htmlFor Source

htmlFor :: String -> VNode -> VNode

#form Source

form :: String -> VNode -> VNode

#max Source

max :: String -> VNode -> VNode

#min Source

min :: String -> VNode -> VNode

#step Source

step :: String -> VNode -> VNode

#cols Source

cols :: Int -> VNode -> VNode

#rows Source

rows :: Int -> VNode -> VNode

#wrap Source

wrap :: String -> VNode -> VNode

#href Source

href :: String -> VNode -> VNode

#target Source

target :: String -> VNode -> VNode

#download Source

download :: String -> VNode -> VNode

#hreflang Source

hreflang :: String -> VNode -> VNode

#media Source

media :: String -> VNode -> VNode

#ping Source

ping :: String -> VNode -> VNode

#rel Source

rel :: String -> VNode -> VNode

#isMap Source

isMap :: Boolean -> VNode -> VNode

#useMap Source

useMap :: String -> VNode -> VNode

#shape Source

shape :: String -> VNode -> VNode

#coords Source

coords :: String -> VNode -> VNode

#src Source

src :: String -> VNode -> VNode

#height Source

height :: Int -> VNode -> VNode

#width Source

width :: Int -> VNode -> VNode

#alt Source

alt :: String -> VNode -> VNode

#autoplay Source

autoplay :: Boolean -> VNode -> VNode

#controls Source

controls :: Boolean -> VNode -> VNode

#loop Source

loop :: Boolean -> VNode -> VNode

#preload Source

preload :: String -> VNode -> VNode

#poster Source

poster :: String -> VNode -> VNode

#default Source

default :: Boolean -> VNode -> VNode

#kind_ Source

kind_ :: String -> VNode -> VNode

#srclang Source

srclang :: String -> VNode -> VNode

#sandbox Source

sandbox :: String -> VNode -> VNode

#srcdoc Source

srcdoc :: String -> VNode -> VNode

#reversed Source

reversed :: Boolean -> VNode -> VNode

#start Source

start :: Int -> VNode -> VNode

#colSpan Source

colSpan :: Int -> VNode -> VNode

#rowSpan Source

rowSpan :: Int -> VNode -> VNode

#headers Source

headers :: String -> VNode -> VNode

#scope Source

scope :: String -> VNode -> VNode

#accessKey Source

accessKey :: Char -> VNode -> VNode

#contentEditable Source

contentEditable :: Boolean -> VNode -> VNode

#dir Source

dir :: String -> VNode -> VNode

#draggable Source

draggable :: Boolean -> VNode -> VNode

#dropzone Source

dropzone :: String -> VNode -> VNode

#lang Source

lang :: String -> VNode -> VNode

#spellcheck Source

spellcheck :: Boolean -> VNode -> VNode

#tabIndex Source

tabIndex :: Int -> VNode -> VNode

#cite Source

cite :: String -> VNode -> VNode

#dateTime Source

dateTime :: String -> VNode -> VNode