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

#wbr Source

wbr :: MarkupT ~> MarkupT

Line break opportunity

#video Source

video :: MarkupT ~> MarkupT

Represents a video

#var Source

var :: MarkupT ~> MarkupT

Represents a variable

#ul Source

ul :: MarkupT ~> MarkupT

Unordered list of items (li)

#u Source

u :: MarkupT ~> MarkupT

Underline with no predefined semantics

#track Source

track :: MarkupT ~> MarkupT

Timed text tracks for audio or video content

#tr Source

tr :: MarkupT ~> MarkupT

A table row

#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

#th Source

th :: MarkupT ~> MarkupT

A cell in a table header.

#tfoot Source

tfoot :: MarkupT ~> MarkupT

Table footer

#textarea Source

textarea :: forall msg. MarkupT msg

A multiline text edit control.

#td Source

td :: MarkupT ~> MarkupT

A cell in a a table row.

#tbody Source

tbody :: MarkupT ~> MarkupT

Table body - contains the data rows

#table Source

table :: MarkupT ~> MarkupT

HTML Table

#sup Source

sup :: MarkupT ~> MarkupT


#summary Source

summary :: MarkupT ~> MarkupT

A summary for a given details.

#sub Source

sub :: MarkupT ~> MarkupT


#strong Source

strong :: MarkupT ~> MarkupT

Represents especially important text.

#span Source

span :: MarkupT ~> MarkupT

Text with no specific meaning.

#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.

#ruby Source

ruby :: MarkupT ~> MarkupT

Ruby annotations, ???

#rt Source

rt :: MarkupT ~> MarkupT

Ruby annotations, ???

#rp Source

rp :: MarkupT ~> MarkupT

Ruby annotations, ???

#q Source

q :: MarkupT ~> MarkupT

An inline quotation.

#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.

#output Source

output :: MarkupT ~> MarkupT

Represents the result of a computation.

#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.

#ol Source

ol :: MarkupT ~> MarkupT

Ordered list of items (li)

#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.

#menu Source

menu :: MarkupT ~> MarkupT

A list of invokable commands

#math Source

math :: MarkupT ~> MarkupT

Mathematical formule

#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.

#li Source

li :: MarkupT ~> MarkupT

An item of an enumeration list.

#legend Source

legend :: MarkupT ~> MarkupT

The caption for a fieldset.

#label Source

label :: MarkupT ~> MarkupT

The caption for a form control

#keygen Source

keygen :: MarkupT ~> MarkupT

A key-pair generator control.

#kbd Source

kbd :: MarkupT ~> MarkupT

Represents user input, often from the keyboard.

#ins Source

ins :: MarkupT ~> MarkupT

Defines an addition to the document.

#input Source

input :: forall msg. MarkupT msg

Typed data field allowing the user to edit the data.

#img Source

img :: MarkupT ~> MarkupT

An image (URL given by src attribute)

#iframe Source

iframe :: MarkupT ~> MarkupT

Embedded HTML document

#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.

#header Source

header :: MarkupT ~> MarkupT

Header of a page or section.

#h6 Source

h6 :: MarkupT ~> MarkupT

Html header

#h5 Source

h5 :: MarkupT ~> MarkupT

Html header

#h4 Source

h4 :: MarkupT ~> MarkupT

Html header

#h3 Source

h3 :: MarkupT ~> MarkupT

Html header

#h2 Source

h2 :: MarkupT ~> MarkupT

Html header

#h1 Source

h1 :: MarkupT ~> MarkupT

Html header

#form Source

form :: MarkupT ~> MarkupT

A submittable form

#footer Source

footer :: MarkupT ~> MarkupT

Footer of a page or section.

#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.

#dt Source

dt :: MarkupT ~> MarkupT

A term in a definitions list

#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.

#del Source

del :: MarkupT ~> MarkupT

Defines a deletion from the document.

#dd Source

dd :: MarkupT ~> MarkupT

A definition in a definition list

#datalist Source

datalist :: MarkupT ~> MarkupT

A predefined set of options for other controls.

#colgroup Source

colgroup :: MarkupT ~> MarkupT

Colgroup for a table

#col Source

col :: MarkupT ~> MarkupT

Represents a column of a table.

#code Source

code :: MarkupT ~> MarkupT

Represents computer code.

#cite Source

cite :: MarkupT ~> MarkupT

Represents the title of a work.

#caption Source

caption :: MarkupT ~> MarkupT

Caption for a table

#canvas Source

canvas :: MarkupT ~> MarkupT

Bitmap area for graphics rendering.

#button Source

button :: MarkupT ~> MarkupT

A button that can be clicked.

#br Source

br :: forall msg. MarkupT msg

Line break.

#body Source

body :: MarkupT ~> MarkupT

HTML body element

#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

#audio Source

audio :: MarkupT ~> MarkupT

Represents a sound or audio stream.

#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.

#a Source

a :: MarkupT ~> MarkupT

Represents a link to another resource.

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


#Markup Source

type Markup msg = Free (MarkupF msg)

#vnode Source

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

Wrap a (already rendered?) VNode

#text Source

text :: forall msg. String -> MarkupT msg

Create a text node.

#render' Source

render' :: forall msg. MarkupT msg -> Array (VNode msg)

Render the content DSL to an Array of VirtualDom nodes.

#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.


#Property Source

newtype Property msg

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

  1. Attributes — You can set things in HTML itself. So the class in <div class="greeting"></div> is called an attribute.

  2. 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!

#onWithOptions Source

onWithOptions :: forall aff msg. String -> Options -> CmdDecoder aff msg -> Property msg

Same as on but you can set a few options.

#on Source

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

Create a custom event listener.

#defaultOptions Source

defaultOptions :: Options

Everything is False by default.

defaultOptions =
    { stopPropagation = False
    , preventDefault = False