Module

Grain.Markup

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

Re-exports from Grain.Markup.Element

#figcaption Source

#blockquote Source

Re-exports from Grain.Markup.Handler

#onWheel Source

#onWaiting Source

#onVolumeChange Source

#onToggle Source

#onTimeUpdate Source

#onSuspend Source

#onSubmit Source

#onStalled Source

#onSelect Source

#onSeeking Source

#onSeeked Source

#onScroll Source

#onReset Source

#onRateChange Source

#onProgress Source

#onPointerUp Source

#onPointerOver Source

#onPointerOut Source

#onPointerMove Source

#onPointerLeave Source

#onPointerEnter Source

#onPointerDown Source

#onPointerCancel Source

#onPlaying Source

#onPlay Source

#onPause Source

#onMouseUp Source

#onMouseOver Source

#onMouseOut Source

#onMouseMove Source

#onMouseLeave Source

#onMouseEnter Source

#onMouseDown Source

#onLoadedMetadata Source

#onLoadedData Source

#onLoadStart Source

#onLoad Source

#onKeyUp Source

#onKeyPress Source

#onKeyDown Source

#onInvalid Source

#onInput Source

#onFocus Source

#onError Source

#onEnded Source

#onEmptied Source

#onDurationChange Source

#onDrop Source

#onDragStart Source

#onDragOver Source

#onDragLeave Source

#onDragEnter Source

#onDragEnd Source

#onDrag Source

#onDoubleClick Source

#onCueChange Source

#onContextMenu Source

#onClick Source

#onChange Source

#onCancel Source

#onCanPlayThrough Source

#onCanPlay Source

#onBlur Source

#onAbort Source

Re-exports from Grain.Markup.Prop

#width Source

width :: Int -> VNode -> VNode

#tabIndex Source

#start Source

start :: Int -> VNode -> VNode

#srclang Source

#spellcheck Source

#size Source

size :: Int -> VNode -> VNode

#sandbox Source

#rows Source

rows :: Int -> VNode -> VNode

#rowSpan Source

#preload Source

#placeholder Source

#pattern Source

#noValidate Source

#minLength Source

#maxLength Source

#htmlFor Source

#hreflang Source

#height Source

#headers Source

#formAction Source

#enctype Source

#dropzone Source

#draggable Source

#download Source

#defaultValue Source

#dateTime Source

#contentEditable Source

#cols Source

cols :: Int -> VNode -> VNode

#colSpan Source

#autofocus Source

#autocomplete Source

#accessKey Source

#acceptCharset Source

Re-exports from Grain.UI

#text Source

text :: String -> VNode

Create a VNode of text.

#prop Source

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

Add a property.

#kids Source

kids :: Array VNode -> VNode -> VNode

Add children.

#key Source

key :: String -> VNode -> VNode

Add a key to a VNode.

#handle Source

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

Bind an event handler.

#fingerprint Source

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 Source

element :: String -> VNode

Create a VNode of specified tag element.

#didUpdate Source

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

Bind didUpdate lifecycle.

#didDelete Source

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

Bind didDelete lifecycle.

#didCreate Source

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

Bind didCreate lifecycle.

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

#component Source

component :: Render VNode -> VNode

Create a VNode of component.

#className Source