Module

Bonsai.Html

Package: purescript-bonsai
Repository: grmble/purescript-bonsai

Bonsai Html Markup

View code is expected to import this module plus Bonsai.Html.Attributes and Bonsai.Html.Events

Re-exports from Bonsai.Html.Elements

#track Source

track :: MarkupT ~> MarkupT

Timed text tracks for audio or video content

#time Source

time :: MarkupT ~> MarkupT

A data and time value, the machine-readable representation can be give in the datetime attribute.

#thead Source

thead :: MarkupT ~> MarkupT

Table header - contains headers rows explaining the data

#textarea Source

textarea :: forall msg. MarkupT msg

A multiline text edit control.

#summary Source

summary :: MarkupT ~> MarkupT

A summary for a given details.

#source Source

source :: MarkupT ~> MarkupT

Allows specification of alternative media resources for video or audio.

#small Source

small :: MarkupT ~> MarkupT

Represents a side comment e.g. text like a disclaimer or copyright. Not essential to comprehension of the document.

#select Source

select :: MarkupT ~> MarkupT

Control that allows section among a set of options

#section Source

section :: MarkupT ~> MarkupT

A (major) section in a document

#samp Source

samp :: MarkupT ~> MarkupT

Represents output of a program or computer.

#s Source

s :: MarkupT ~> MarkupT

Represents content that is no longer accurate or relevant.

#progress Source

progress :: MarkupT ~> MarkupT

Represents the completion progress of a task.

#pre_ Source

pre_ :: MarkupT ~> MarkupT

Indictes that its content is preformattet and the format must be preserved.

#param Source

param :: MarkupT ~> MarkupT

Parameters for plugins invoked by object.

#p Source

p :: MarkupT ~> MarkupT

The content should be displayed as a paragraph.

#option Source

option :: MarkupT ~> MarkupT

A option in a select tag, or a suggestion in a datalist

#optgroup Source

optgroup :: MarkupT ~> MarkupT

A set of options, logically grouped.

#object Source

object :: MarkupT ~> MarkupT

Represents external resource that may be processed by a plugin

#nav Source

nav :: MarkupT ~> MarkupT

A section that contains only navigation links

#meter Source

meter :: MarkupT ~> MarkupT

Represents a scalar measurement with a known range.

#menuitem Source

menuitem :: MarkupT ~> MarkupT

A command the user can invoke.

#mark Source

mark :: MarkupT ~> MarkupT

Text highlighted for reference purposes, i.e. for relevance in another context.

#main_ Source

main_ :: MarkupT ~> MarkupT

Main or important content in the document.

There is only one main element in the document.

#main Source

main :: MarkupT ~> MarkupT

Main or important content in the document.

There is only one main element in the document.

#kbd Source

kbd :: MarkupT ~> MarkupT

Represents user input, often from the keyboard.

#input Source

input :: forall msg. MarkupT msg

Typed data field allowing the user to edit the data.

#i Source

i :: MarkupT ~> MarkupT

Represents text in some alternate voice or mood.

Used with bootstrap et. al. for icons

#hr Source

hr :: forall msg. MarkupT msg

A thematic break between paragraphs of a section or article or any longer content.

#figure Source

figure :: MarkupT ~> MarkupT

A figure illustrated as part of the document

#figcaption Source

figcaption :: MarkupT ~> MarkupT

Legend for a figure.

#fieldset Source

fieldset :: MarkupT ~> MarkupT

Represents a set of controls in (usually) a form

#embed Source

embed :: MarkupT ~> MarkupT

Integration point for external application or content.

#em Source

em :: MarkupT ~> MarkupT

Represents emphasized text, like a stress accent.

#dl Source

dl :: MarkupT ~> MarkupT

Definition List, a list of terms and their definitions

#div_ Source

div_ :: MarkupT ~> MarkupT

Generic container with no special meaning. Also div.

#div Source

div :: MarkupT ~> MarkupT

Generic container with no special meaning.

This clashes with a function from the prelude, so either use div_ or "import Prelude hiding (div)"

#dfn Source

dfn :: MarkupT ~> MarkupT

A term whose definition is contained in its nearest ancestore.

#details Source

details :: MarkupT ~> MarkupT

Represents a widget from which the user can obtaion additional input or controls.

#datalist Source

datalist :: MarkupT ~> MarkupT

A predefined set of options for other controls.

#colgroup Source

colgroup :: MarkupT ~> MarkupT

Colgroup for a table

#caption Source

caption :: MarkupT ~> MarkupT

Caption for a table

#blockquote Source

blockquote :: MarkupT ~> MarkupT

Represents content that is quoted from another source

#bdo Source

bdo :: MarkupT ~> MarkupT

Represents bidirectionality of its children in order to override the unicode bidirectional algorithm.

#bdi Source

bdi :: MarkupT ~> MarkupT

Content with bidirectional text formatting.

#b Source

b :: MarkupT ~> MarkupT

Text to which attention should be drawn for utilarian purposes.

It's bold, the non-semantic strong

#aside Source

aside :: MarkupT ~> MarkupT

Content that is loosely related to the page.

If it is removed, the remaining content still makes sense.

#article Source

article :: MarkupT ~> MarkupT

Self-contained content that could exist independently.

#address Source

address :: MarkupT ~> MarkupT

A section containing contact information.

#abbr Source

abbr :: MarkupT ~> MarkupT

An abbreviation or acronym, the expansion can be given in the title attribute.

Re-exports from Bonsai.Html.Internal

#MarkupT Source

type MarkupT msg = Markup msg Unit

#MarkupF Source

data MarkupF msg a

Markup Functor for the DSL

Instances

Functor (MarkupF msg)
HasAttribute (Free (MarkupF msg) Unit) (Property msg)
HasStyle (Free (MarkupF msg) Unit)
HasAttribute (Free (MarkupF msg) Unit -> Free (MarkupF msg) Unit) (Property msg)
HasStyle (Free (MarkupF msg) Unit -> Free (MarkupF msg) Unit)

#Markup Source

type Markup msg = Free (MarkupF msg)

#render Source

render :: forall msg. MarkupT msg -> VNode msg

Render the content DSL to a VirtualDom node.

#keyedElement Source

keyedElement :: forall msg. String -> Array (Property msg) -> Array (Tuple String (VNode msg)) -> MarkupT msg

keyedElement renders to a VirtualDom keyedNode. The DSL does not work here to give it attributes and/or styles

#attribute Source

attribute :: forall msg. String -> String -> Property msg

Create a custom attribute

#(#!?) Source

Operator alias for Bonsai.Html.Internal.withOptionalStyle (left-associative / precedence 4)

#(#!) Source

Operator alias for Bonsai.Html.Internal.withStyle (left-associative / precedence 4)

#(!?) Source

Operator alias for Bonsai.Html.Internal.withOptionalAttribute (left-associative / precedence 4)

#(!) Source

Operator alias for Bonsai.Html.Internal.withAttribute (left-associative / precedence 4)

Re-exports from Bonsai.VirtualDom

#VNode Source

newtype VNode msg

An immutable chunk of data representing a DOM node. This can be HTML or SVG.

It's a functor that maps the Cmds that are emitted by event handlers.

Instances

Functor VNode

#Property Source

newtype Property msg

When using HTML and JS, there are two ways to specify parts of a DOM node.

Attributes — You can set things in HTML itself. So the class in <div class="greeting"></div> is called an attribute.
Properties — You can also set things in JS. So the className in div.className = 'greeting' is called a property.

So the class attribute corresponds to the className property. At first glance, perhaps this distinction is defensible, but it gets much crazier. There is not always a one-to-one mapping between attributes and properties! Yes, that is a true fact. Sometimes an attribute exists, but there is no corresponding property. Sometimes changing an attribute does not change the underlying property. For example, as of this writing, the webkit-playsinline attribute can be used in HTML, but there is no corresponding property!

#on Source

on :: forall msg eff. String -> (CmdDecoder eff msg) -> Property msg

Create a custom event listener.

import Json.Decode as Json

onClick : msg -> Property msg
onClick msg =
  on "click" (Json.succeed msg)

You first specify the name of the event in the same format as with JavaScript’s addEventListener. Next you give a JSON decoder, which lets you pull information out of the event object. If the decoder succeeds, it will produce a message and route it to your update function.

#defaultOptions Source

defaultOptions :: Options

Everything is False by default.

defaultOptions =
    { stopPropagation = False
    , preventDefault = False
    }

Modules: Bonsai; Bonsai.Core; Bonsai.DOM; Bonsai.Debug; Bonsai.EventDecoder; Bonsai.Html; Bonsai.Html.Attributes; Bonsai.Html.Elements; Bonsai.Html.Events; Bonsai.Html.Internal; Bonsai.Types; Bonsai.VirtualDom

Bonsai.Html

Re-exports from Bonsai.Html.Elements

#wbr Source

#video Source

#var Source

#ul Source

#u Source

#track Source

#tr Source

#time Source

#thead Source

#th Source

#tfoot Source

#textarea Source

#td Source

#tbody Source

#table Source

#sup Source

#summary Source

#sub Source

#strong Source

#span Source

#source Source

#small Source

#select Source

#section Source

#samp Source

#s Source

#ruby Source

#rt Source

#rp Source

#q Source

#progress Source

#pre_ Source

#param Source

#p Source

#output Source

#option Source

#optgroup Source

#ol Source

#object Source

#nav Source

#meter Source

#menuitem Source

#menu Source

#math Source

#mark Source

#main_ Source

#main Source

#li Source

#legend Source

#label Source

#keygen Source

#kbd Source

#ins Source

#input Source

#img Source

#iframe Source

#i Source

#hr Source

#header Source

#h6 Source

#h5 Source

#h4 Source

#h3 Source

#h2 Source

#h1 Source

#form Source

#footer Source