Module

Beta.DOM

Package: purescript-react-basic-dom-beta
Repository: rowtype-yoga/purescript-react-basic-dom-beta

Re-exports from Beta.DOM.HTML

#wbr Source

wbr :: FFIComponent_ BaseAttributes

The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line.

Example:

[ text "Super", wbr {}, text "Califragilisticexpialidocious" ]

#video Source

video :: FFIComponent VideoAttributes

The <video> HTML element embeds a media player which supports video playback into the document.

Example:

video { src: "video.mp4", width: 320, height: 240 } "Video content or text displayed if video cannot be played."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | src | String | "video.mp4" | The URL of the video to embed | | width | Int | 320 | The width of the video player | | height | Int | 240 | The height of the video player |

#var Source

var :: FFIComponent BaseAttributes

The <var> HTML element represents the name of a variable in a mathematical expression or a programming context.

Example:

var { } "threehalfs"

#ul Source

ul :: FFIComponent BaseAttributes

The <ul> tag in HTML, represents an unordered list of items, typically rendered as a bulleted list.

Example:

ul { className: "element-list" } [ li { } "Item 1", li { } "Item 2" ]

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | className | String | "element-list" | The class of the ul for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

#u Source

u :: FFIComponent BaseAttributes

The <u> HTML element represents an unarticulated annotation. In most languages, this would not change the meaning of the sentence -- it's just a stylistic choice to underline.

Example:

u {} "Underlined text goes here."

#track Source

track :: FFIComponent_ TrackAttributes

The <track> HTML element is used as a child of the media elements—<audio>, <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles.

Example:

track { kind: "subtitles", src: "subs_eng.srt", srcLang: "en" }

Common attributes:

| Name | Type | Example | Description | |---------|--------|-------------|-------------| | kind | String | "subtitles" | Kind of text track | | src | String | "subs_eng.srt" | URL of the track file | | srcLang | String | "en" | Language of the track text data |

#tr Source

tr :: FFIComponent BaseAttributes

The <tr> HTML element defines a row of cells in a table. Those can be a mix of <td> and <th> elements.

Example:

tr {} [ th {} [ text "Cell 1" ], td {} [ text "Cell 2" ] ]

#title Source

title :: String -> JSX

The <title> tag in HTML, it defines the title of the HTML document, which is shown in a browser's title bar or a page's tab.

Example:

title "Page Title"

The <title> tag must be placed within the <head> tag. Note: The <title> tag does not have specific attributes, it only contains text representing the document title.

#time Source

time :: FFIComponent TimeAttributes

The <time> HTML element represents a specific period in time.

Example:

time { datetime: "2024-02-14" } "Valentine's Day"

Common attributes:

| Name | Type | Example | Description | |-------------|--------|-------------|-------------| | datetime | String | "2008-02-14" | Machine-readable equivalent of the time |

#thead Source

thead :: FFIComponent BaseAttributes

The <thead> HTML element groups the header content in a table.

Example:

thead {} [ tr {} [ th {} "First Name", th {} "Last Name" ] ]

#th Source

th :: FFIComponent BaseAttributes

The <th> HTML element defines a cell as header of a group of cells. The exact nature of this group depends on the context.

Example:

th {} "Name"

#tfoot Source

tfoot :: FFIComponent BaseAttributes

The <tfoot> HTML element a set of rows summarizing the columns of the table. It is a direct child of the <table> element.

Example:

table {}
  [ thead {} [ tr {} [ th {} "Item", th {} "Price" ] ]
  , tbody {}
      [ tr {} [ td {} "Apples", td {} "£10" ]
      , tr {} [ td {} "Oranges", td {} "£12" ]
      ]
  , tfoot {} [ tr {} [ th {} "Total", td {} "£22" ]
  ]

#textarea Source

textarea :: FFIComponent_ TextareaAttributes

The <textarea> HTML element represents a multi-line plain-text editing control.

Example:

textarea { rows: 5, cols: 50, value, onChange }

Common attributes:

| Name | Type | Example | Description | |---------|--------|------------------|-------------| | cols | Int | 50 | Specifies the visible width | | rows | Int | 5 | Specifies the visible number of lines |

#template Source

template :: FFIComponent BaseAttributes

The <template> HTML element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime. You probably don't want this when using React.

Example:

template { } "Template content goes here."

Common attributes:

| Name | Type | Example | Description | |---------|--------|-------------|-------------| | className | String | "templateClass" | CSS class of the element |

#td Source

td :: FFIComponent BaseAttributes

The <td> HTML element standard cell in a table. It can be filled with data.

Example:

td {} "Finally the content of the cell"

#tbody Source

tbody :: FFIComponent BaseAttributes

The <tbody> HTML element groups the body content in a table.

Example:

| <p></p> | <p></p> | | --- | --- | | ↖ | ↗ | | ↙ | ↘ |

tbody {}
  [ tr {} [ td {} "↖", td {} "↗" ]
  , tr {} [ td {} "↙", td {} "↘" ]
  ]

#table Source

table :: FFIComponent BaseAttributes

The <table> HTML element represents data in two dimensions or more.

Example:

table {}
  [ thead {}
    [ tr {} [ th {} "Header No. 1", th {} "Header No. 2" ]
  , tbody {}
    [ tr {} [ td {} "Row 1, Col 1", td {} "Row 1, Col 2" ]
    , tr {} [ td {} "Row 2, Col 1", td {} "Row 2, Col 2" ]
    ]
  ]

| Header No. 1 | Header No. 2 | | --- | --- | | Row 1, Col 1 | Row 1, Col 2 | | Row 2, Col 1 | Row 2, Col 2 |

#sup Source

sup :: FFIComponent BaseAttributes

The <sup> HTML element specifies a span of inline text to be displayed at a higher vertical position relative to the text around it for typographical reasons.

Example:

-- E=mc²
[ text "E=mc", sup {} "2" ]

#summary Source

summary :: FFIComponent SummaryProps

The <summary> HTML element is used as a summary, caption, or legend for the content of a <details> element.

Example:

details {}
  [ summary {} "Summary text goes here."
  , text "The long version of the details goes here."
  ]

#sub Source

sub :: FFIComponent BaseAttributes

The <sub> HTML element specifies inline text which should be displayed as subscript for solely typographical reasons.

Example:

sub {} "Subscript text goes here."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|-------------|-------------| | className | String | "subText" | CSS class of the element |

#style Source

style :: FFIRawTextComponent StyleAttributes

The <style> HTML element contains style information for a document, or part of a document. The child must be a string

Example:

style { type: "text/css" } "body { background-color: #f0f0f2; }"

#strong Source

strong :: FFIComponent BaseAttributes

The <strong> HTML element gives text strong importance, and is typically displayed in bold.

Example:

strong {} "Important text goes here."

#span Source

span :: FFIComponent BaseAttributes

The <span> tag in HTML is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values.

Example:

span { id: "highlight", className: "note" } "This is a note"

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | id | String | "highlight" | The unique identifier of the span. | | className | String | "note" | The class of the span for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

#source Source

source :: FFIComponent_ SourceAttributes

The <source> HTML element is used to specify multiple media resources for media elements, such as <picture>, <audio>, and <video>.

Example:

picture {}
  [ source { srcset: "image-large.jpg", media: "(min-width: 800px)", type: "image/jpeg" }
  , source { srcset: "image-medium.jpg", media: "(min-width: 600px)", type: "image/jpeg" }
  , img { src: "image-small.jpg", alt: "Description" }
  ]

Common attributes:

| Name | Type | Example | Description | |-----------------|--------|-------------|-----------------------------------------| | src | String | "audio.ogg" | URL of the media file or stream | | type | String | "audio/ogg" | Type of the media file or stream | | media | String | "(min-width: 600px)" | Media query of the media resource | | srcset | String | "image-1x.jpg 1x, image-2x.jpg 2x" | Image source set for <picture> |

#small Source

small :: FFIComponent BaseAttributes

The <small> HTML element represents side comments such as small print.

Example:

small {} "Small print text goes here."

#select Source

select :: FFIComponent SelectAttributes

The <select> HTML element represents a control that provides a menu of options.

Example:

select { value, onChange }
  [ option { value: "" } "Select an option"
  , option { value: "option1" } "Option 1"
  , option { value: "option2" } "Option 2"
  ]

#section Source

section :: FFIComponent BaseAttributes

The <section> HTML element represents a standalone section of functionality contained within an HTML document, typically with a heading, ...

Example:

section {} "Section content goes here."

#scriptInline Source

scriptInline :: FFIRawTextComponent ScriptAttributes

The <script> HTML element is used to embed executable code or data; this is typically used to embed JavaScript code.

Example:

scriptInline { type: "text/javascript" } "jQuery('body').append('<p>Hello World!</p>');"

#script Source

script :: FFIComponent_ ScriptAttributes

The <script> HTML element is used to embed executable code or data; this is typically used to refer to JavaScript code. See scriptInline for scripts that don't just reference a file.

Example:

script { src: "script.js", crossOrigin: true, type: "text/javascript" }
-- or

#samp Source

samp :: FFIComponent BaseAttributes

The <samp> HTML element is used to display sample output from a computer program.

Example:

samp {} "Program output goes here"

#s Source

s :: FFIComponent BaseAttributes

The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate.

Example:

s {} "This text is no longer accurate."

#ruby Source

ruby :: FFIComponent BaseAttributes

The <ruby> HTML element represents a ruby annotation. Ruby annotations are for showing pronunciation of East Asian characters.

Example:

ruby {} "Ruby annotation goes here."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | className | String | "rubyAnnotation" | CSS class of the element |

#rt Source

rt :: FFIComponent BaseAttributes

The <rt> HTML element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography.

Example:

rt {} "Pronunciation goes here."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | className | String | "rubyText" | CSS class of the element |

#rp Source

rp :: FFIComponent BaseAttributes

The <rp> HTML element is used to provide fallback parentheses for browsers that do not support display of ruby annotations using the <ruby> element.

Example:

rp {} "(fallback content)"

#q Source

q :: FFIComponent BaseAttributes

The <q> HTML element indicates that the enclosed text is a short inline quotation.

Example:

q {} "This is a quote."

#progress Source

progress :: FFIComponent ProgressAttributes

The <progress> HTML element represents the completion progress of a task.

Example:

progress { value: "70", max: "100" } ""

Common attributes:

| Name | Type | Example | Description | |------|------|---------|-------------| | value | String | "70" | Current value of the progress | | max | String | "100" | Maximum value of the progress |

#pre Source

pre :: FFIComponent BaseAttributes

The <pre> HTML element represents preformatted text, in which structure is represented by typographic conventions rather than by the elements.

Example:

pre {} " Preformatted text goes here. "

Common attributes:

| Name | Type | Example | Description | |------|------|---------|-------------| | className | String | "codeBlock" | CSS class of the element |

#picture Source

picture :: FFIComponent BaseAttributes

The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display scenarios.

Example:

picture {}
  [ source { srcset: "large.jpg", media: "(min-width: 800px)" }
  , source { srcset: "medium.jpg", media: "(min-width: 600px)" }
  , img { src: "small.jpg", alt: "Description of the image" }
  ]-- | ```

#param Source

param :: FFIComponent_ ParamAttributes

The <param> HTML element defines parameters for plugins invoked by <object> elements.

Example:

param { name: "autoplay", value: "true" }

Common attributes:

| Name | Type | Example | Description | |------|------|---------|-------------| | name | String | "autoplay" | Name of the parameter | | value | String | "true" | Value of the parameter |

#p Source

p :: FFIComponent BaseAttributes

The <p> HTML element represents a paragraph.

Example:

p {} "This is a paragraph."

#output Source

output :: FFIComponent BaseAttributes

The <output> HTML element represents the result of a calculation or user action.

Example:

output {} "Result goes here."

#option Source

option :: FFIComponent OptionAttributes

The <optgroup> HTML element creates a grouping of options within a <select> element.

Example:

optgroup { label: "Group 1" } "Options go here."

Common attributes:

| Name | Type | Example | Description | |-----------------|--------|---------------|------------------------------------| | label | String | "Group 1" | Label for the option group |

#optgroup Source

optgroup :: FFIComponent OptgroupAttributes

#ol Source

ol :: FFIComponent OlAttributes

The <ol> tag in HTML, represents an ordered list of items — typically rendered as a numbered list.

Example:

ol { className: "element-list" } [ li { } "Item 1", li { } "Item 2" ]

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | start | Number | 5 | Defines the start number of the ordered list. | | type | String | "1" | Defines the type of numbering that should be used.

#object Source

object :: FFIComponent ObjectAttributes

The <object> HTML element is used to embed content from an external application or interactive content (including images, audio and video). Among the possible reasons for using object to embed an image, the most practical is that it allows the fallback content to contain HTML markup, such as headings, lists, tables, and phrase markup. The img element lets you specify only plain text as fallback content—even paragraph breaks cannot be specified.

Example:

object { data: "image.svg", type: "image/svg+xml" } "Your browser does not support SVG."

Common attributes:

| Name | Type | Description | |-----------------|---------|------------------------------------| | data | String | URL of the embedded content | | type | String | Media type of the embedded content |

#noscript Source

noscript :: FFIComponent BaseAttributes

The <noscript> tag in HTML, used to provide an alternative content for users that have disabled scripts in their browser or have a browser that doesn't support script.

Example:

noscript {}
  "Your browser does not support JavaScript!"

Common attributes:

No standard attributes.

#nav Source

nav :: FFIComponent BaseAttributes

The <nav> HTML element represents a section of a page whose purpose is to provide navigation links.

Example:

nav { className: "mainNav" }
  [ ul {}
      [ li {} $ a { href: "#section1" } "Section 1"
      , li {} $ a { href: "#section2" } "Section 2"
      ]
  ]

#meter Source

meter :: FFIComponent MeterAttributes

The <meter> HTML element represents a scalar measurement within a known range, or a fractional value.

Example:

meter { value: "0.6", min: "0", max: "1", low: "0.25", high: "0.75", optimum: "0.5" } ""

Common attributes:

| Name | Type | Example | Description | |-------------|--------|-----------|-------------| | value | String | "0.6" | Current value of the measurement | | min | String | "0" | Minimum limit of the range | | max | String | "1" | Maximum limit of the range | | low | String | "0.25" | Low end of the "good" part of the range | | high | String | "0.75" | High end of the "good" part of the range | | optimum | String | "0.5" | Optimum value in the range |

#meta Source

meta :: FFIComponent_ MetaAttributes

The <meta> tag in HTML, which provides metadata about the HTML document. Metadata is not displayed but is machine parsable. meta is a void element — it can't contain any children

Example:

-- General meta tags
meta { charSet: "utf-8" }
meta { name: "viewport", content: "width=device-width, initial-scale=1" }
meta { name: "description", content: "This is the description of the page." }
meta { name: "keywords", content: "keyword1, keyword2, keyword3" }

-- Open Graph tags (for Facebook, LinkedIn etc.)
meta { property: "og:title", content: "The Title of the Webpage" }
meta { property: "og:description", content: "The description of the webpage." }
meta { property: "og:image", content: "https://example.com/path/to/image.jpg" }
meta { property: "og:url", content: "https://example.com/page.html" }

-- Twitter card tags
meta { name: "twitter:card", content: "summary_large_image" }
meta { name: "twitter:creator", content: "@username" }
meta { name: "twitter:title", content: "The Title of the Webpage" }
meta { name: "twitter:description", content: "The description of the webpage." }
meta { name: "twitter:image", content: "https://example.com/path/to/image.jpg" }

Common attributes:

| Attribute | Type | Example | Description | |------------|----------|-----------------------------------------|-------------| | charSet | String | "UTF-8" | Specifies the character encoding for the HTML document. | | content | String | "width=device-width, initial-scale=1" | Gives the value associated with the http-equiv or name attribute. | | http-equiv | String | "refresh" | Provides an HTTP header for the information/value of the content attribute. | | name | String | "description" | Defines a name for the metadata. | | property | String | "og:title" | Defines the property the metadata should be associated with. |meta :: FFIComponent_ MetaAttributes

#mark Source

mark :: FFIComponent BaseAttributes

The <mark> HTML element represents highlighted text.

Example:

mark {} "This text is highlighted."

Common attributes:

| Name | Type | Example | Description | |-------------|--------|---------------|-------------| | className | String | "highlighted" | CSS class of the element |

#map Source

map :: FFIComponent MapAttributes

The <map> HTML element is used with area elements to define an image map.

Example:

map { name: "planetmap" }
  [ area { shape: "rect", coords: "50,50,100,100", href: "location1.html", alt: "Location 1" }
  , area { shape: "circle", coords: "200,200,50", href: "location2.html", alt: "Location 2" }
  ]

Common attributes:

| Name | Type | Description | |-------------|---------|-------------| | name | String | Name of the image map |

#main Source

main :: FFIComponent BaseAttributes

The <main> HTML element represents the dominant content of the body of a document.

Example:

H.main {} "This is the main content of the document."

#link Source

link :: FFIComponent_ LinkAttributes

The <link> tag in HTML, defines the relationship between the current document and an external resource. link is a void element — it can't contain any children

Example:

link { rel: "stylesheet", href: "/style.css" }
link { rel: "icon", type: "image/png", href: "/favicon.png" }

Common attributes: | Attribute | Type | Example | Description | |-----------|----------|----------------|-------------| | href | String | "/style.css" | Location of the linked resource. | | rel | String | "stylesheet" | The relationship between the current document and the linked resource. | | type | String | "image/png" | The media type of the linked resource. | | media | String | "screen" | What media/device the linked resource is optimised for. | | as | String | "fetch" | This attribute is required when rel="preload" has been set on the <link> element, optional when rel="modulepreload" has been set, and otherwise should not be used. | | crossOrigin | String | "anonymous" |

#li Source

li :: FFIComponent BaseAttributes

The <li> tag in HTML, is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

Example:

li { className: "item" } "This is a list item"

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | value | Number | 1 | Defines a value for ordered list items | | className | String | "item" | The class of the li for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

#legend Source

legend :: FFIComponent BaseAttributes

The <legend> HTML element represents a caption for the content of its parent <fieldset>.

Example:

legend { } "Account Information"

#label Source

label :: FFIComponent LabelAttributes

The <label> HTML element represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the htmlFor attribute.

Example:

[ label { htmlFor: "username" } "Enter your username"
, input { id: "username" }
]
-- or
label {} [ input { id: "username" }, text "Enter your username" ]

Common attributes:

| Name | Type | Description | |------|------|-------------| | htmlFor (id) | String | ID of a labellable form-related element in the same document as the <label> element | | className | String | CSS class of the element |

#kbd Source

kbd :: FFIComponent BaseAttributes

The <kbd> HTML element denotes text to be input from a keyboard.

Example:

kbd {} "Ctrl + P"

#input Source

input :: FFIComponent_ InputAttributes

The <input> HTML element represents a field for user input.

Example

input
  { type: "text"
  , name: "username"
  , value: "Default value"
  }

Common Attributes

| Name | Type | Description | |---------|--------|-------------| | type | String | Specifies the input type | | name | String | Specifies the name of the input field | | value | String | Specifies the default value of the input field |

#img Source

img :: FFIComponent_ ImgAttributes

The <img> HTML element represents an image in the document.

Example:

img
  { src: "image.jpg"
  , alt: "A beautiful scenery"
  }

Common Attributes:

| Name | Type | Description | |---------|--------|-------------| | src | String | source URL of the image | | alt | String | alternative text for the image for blind and otherwise impaired users |

#iframeWithChildren Source

iframeWithChildren :: FFIComponent IFrameAttributes

#iframe Source

iframe :: FFIComponent_ IFrameAttributes

The <iframe> HTML element represents a nested browsing context, effectively embedding another HTML page into the current page.

Example:

iframe
  { src: "https://www.example.com"
  , height: "500"
  , width: "500"
  , name: "Example Frame"
  , sandbox: "allow-scripts allow-top-navigation"
  , srcdoc: "<p>Some embedded HTML</p>"
  , allow: "autoplay; encrypted-media"
  }

Common Attributes

| Name | Type | Description | |----------|--------|-------------| | src | String | Source URL of the embedded content | | height | String | Height of the iframe | | width | String | Width of the iframe | | name | String | Name of the iframe | | sandbox| String | Applies extra restrictions to the iframe's content | | srcdoc | String | Inline HTML to embed | | allow | String | The iframe's feature policy |

#i Source

i :: FFIComponent BaseAttributes

The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.

Example:

i {} "This text is rendered in italics."

#html Source

html :: FFIComponent BaseAttributes

The <html> tag in HTML, which is the root of an HTML document.

Example:

html { lang: "en" }
  [ head {}
    [ title "Window/Tab title"
    , meta { charSet: "utf-8" }
    ]
  , body {} [ {- main page content -} ]
  ]

Common attributes:

| Attribute | Type | Example | Description | |-----------|----------|---------|-------------| | lang | String | "en" | Language of the website | | dir | String | "ltr" | Text direction (e.g. rtl: right-to-left for Arabic) |

#hr Source

hr :: FFIComponent_ BaseAttributes

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. This is a void element, it can't have any children or content inside it.

Common attributes: className, id

Example:

hr { className: "section-divider" }

#header Source

header :: FFIComponent BaseAttributes

The <header> HTML element represents introductory content, typically a group of introductory or navigational aids.

Common attributes: className, id

Example:

header { className: "site-header" } "Introductory content goes here"

#head Source

head :: FFIComponent BaseAttributes

The <head> tag in HTML, typically includes meta-information about the document such as its title, linked stylesheets and scripts.

Example:

head {}
  [ title "Tab title"
  , meta { charset: "utf-8" }
  , link { rel: "stylesheet", href: "style.css" }
  , script_ { src: "script.js" }
  ]

#h6 Source

h6 :: FFIComponent BaseAttributes

The <h6> HTML element represents a sixth level heading in the document.

Example:

h6 { } "This is a sixth level heading (h6)"

#h5 Source

h5 :: FFIComponent BaseAttributes

The <h5> HTML element represents a fifth level heading in the document.

Example:

h5 { } "This is a fifth level heading (h5)"

#h4 Source

h4 :: FFIComponent BaseAttributes

The <h4> HTML element represents a fourth level heading in the document.

Example:

h4 { } "This is a fourth level heading (h4)"

#h3 Source

h3 :: FFIComponent BaseAttributes

The <h3> HTML element represents a third level heading in the document.

Example:

h3 { } "This is a third level heading (h3)"

#h2 Source

h2 :: FFIComponent BaseAttributes

The <h2> HTML element represents a second level heading in the document.

Example:

h2 { } "This is a second level heading (h2)"

#h1 Source

h1 :: FFIComponent BaseAttributes

The <h1> HTML element represents a first level heading in the document.

Example:

h1 { } "This is a first level heading (h1)"

Note: Only one <h1> element should be present on a page. It should be the main heading.

#form Source

form :: FFIComponent FormAttributes

The <form> HTML element represents a form, which is a component of an application that is designed for the performing of an action by the user.

Example:

form { action: "/path/to/submit", method: "post", onSubmit }
  [ input { type: "text", name: "username", value: userName, onChange: onChangeUserName }
  , input { type: "password", name: "password", value: password, onChange: onChangePassword }
  , input { type: "submit", value: "Login" }
  ]

#footer Source

footer :: FFIComponent BaseAttributes

The <footer> HTML element represents a footer for its nearest sectioning content or sectioning root element.

Example:

footer { } [ text "Footer content goes here." ]

#figure Source

figure :: FFIComponent BaseAttributes

The <figure> HTML element represents self-contained content that's often referenced as a single unit from the main flow of the document.

Example:

figure { } "Content of the figure goes here."

#figcaption Source

figcaption :: FFIComponent BaseAttributes

The <figcaption> HTML element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figure> element, its direct ancestor.

Example:

figcaption { } "This is a caption for the figure"

#fieldset Source

fieldset :: FFIComponent BaseAttributes

The <fieldset> HTML element is a set of form controls optionally grouped under a common name.

Example:

fieldset { } [ text "Form controls go here" ]

#embed Source

embed :: FFIComponent_ EmbedAttributes

#em Source

em :: FFIComponent BaseAttributes

The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.

Example:

em {} "This text is emphasised."

#dt Source

dt :: FFIComponent BaseAttributes

The <dt> HTML element specifies a term in a description list (<dl>). This element can exist only as a child element of a description list and it is paired with a <dd> element that provides the definition of a term.

Example:

dt {} "Term 1"

#dl Source

dl :: FFIComponent BaseAttributes

The <dl> HTML element is for grouping together sets of <dt> (term) and <dd> (description) elements, typically used for creating a list of terms along with their associated descriptions.

Example:

dl {}
 [ dt {} "Term 1"
 , dd {} "Description of Term 1"
 , dt {} "Term 2"
 , dd {} "Description of Term 2"
 ]

#div_ Source

div_ :: FFIComponent_ BaseAttributes

The <div> tag in HTML without children, acts as a container unit which encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

Example:

div_ { id: "header", className: "menu" }
div_ { id: "body", className: "container" }

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | id | String | "header" | The unique identifier of the div section. | | className | String | "container" | The class of the div section for applying CSS styles. | | data-* | String | "custom-data" | Stores custom data private to the page or application. | | aria-* | String | "aria-labelledby" | Defines accessibility-related attributes. |

#div Source

div :: FFIComponent BaseAttributes

The <div> tag in HTML, acts as a container unit which encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

Example:

div { id: "header", className: "menu" } [ h1 { } "Hello, World!" ]
div { id: "body", className: "container" } [ p { } "Welcome to the website!" ]

#dialog Source

dialog :: FFIComponent DialogAttributes

#dfn Source

dfn :: FFIComponent BaseAttributes

The <dfn> HTML element represents the defining instance of a term in a document.

Example:

dfn {} "This is a defining instance of a term."

#details Source

details :: FFIComponent DetailsAttributes

#del Source

del :: FFIComponent BaseAttributes

The <del> HTML element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example.

Example:

del {} "This text has been deleted from the document."

#dd Source

dd :: FFIComponent BaseAttributes

The <dd> HTML element indicates the description of a term in a description list (<dl>), enclosed by <dt> (term) and <dd> (description). Each pair of <dt> and <dd> shares a common parent <dl>.

Example:

dl { }
 [ dt { } [ text "Term 1" ]
 , dd { } [ text "Description of Term 1" ]
 , dt { } [ text "Term 2" ]
 , dd { } [ text "Description of Term 2" ]
 ]

#datalist Source

datalist :: FFIComponent BaseAttributes

The <datalist> element in HTML, provides a "autocomplete" feature on input elements. Users will see a drop-down list of pre-defined options as they input data.

Note: <datalist> is connected to an <input> element with the list attribute.

Example:

datalist { id: "browsers" } [option { value: "Firefox" }, option { value: "Chrome" }, option { value: "Opera" }, option { value: "Safari" }]

#dataElem Source

dataElem :: FFIComponent DataAttributes

The <data> element in HTML, links a given content with a machine-readable translation. It lets you associate a data value with content that, while being machine-readable, is also human-readable.

Note: <data> only has a semantic effect when the 'value' attribute is set.

Example:

dataElem { value: "15" } "$15"

#colgroup Source

colgroup :: FFIComponent ColGroupAttributes

#col Source

col :: FFIComponent_ ColAttributes

The <col> element in HTML, provides a way to group columns of data together in a table and apply styles to them. It's used inside a <colgroup> element. Importantly, <col> is an empty element that doesn't have child nodes.

Example:

col { span: 2, className: "myClass" }

#code Source

code :: FFIComponent BaseAttributes

The <code> element in HTML, is used to display a code snippet in a fixed-width font that is easy to read. It is a phrase tag and is used to represent a piece of computer code.

Example:

code { } """main = log $ "Hello," <> "World!""""

#cite Source

cite :: FFIComponent BaseAttributes

The <cite> element in HTML, represents a reference to a creative work. It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata.

Example:

cite { } "The Title of the Work"

#caption Source

caption :: FFIComponent BaseAttributes

The <caption> element in HTML, specifies the caption (or title) of a table. If it is not included in the HTML, there will be no caption. However, if it is included, it must be the first child of its parent <table> element.

Example:

table { }
  [ caption { } "This is a caption"
  , thead { } [ ... ]
  , tbody { } [ ... ]
  ]

#canvas Source

canvas :: FFIComponent CanvasAttributes

The <canvas> element in HTML, is used to draw graphics via scripting (usually JavaScript). By default, it creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown.

Example:

canvas { id: "myCanvas", width: 200.0, height: 200.0 }

Note: It primarily takes two attributes height and width which specify the height and width of the canvas respectively.

#button_ Source

button_ :: FFIComponent_ ButtonProps

The <button> tag in HTML without children, represents a clickable button.

Example:

button { type: "button", className: "submit-button" }

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|---------------------|-------------| | type | String | "button" | The type of the button. | | className | String | "submit-button" | The class of the button for applying CSS styles. | | disabled | Boolean| true | Specifies that the button should be disabled. | | form | String | "form-id" | Specifies the form the button belongs to. |

#button Source

button :: FFIComponent ButtonProps

The <button> tag in HTML, represents a clickable button.

Example:

button { type: "button", className: "submit-button" } "Click me"

#br Source

br :: FFIComponent_ BaseAttributes

The <br> element in HTML, produces a line break in text (carriage-return). It is useful for writing a poem or a speech, where the division of lines is significant. Please note that the <br> can't have children.

Example:

"This is a line of text." ++ br {} ++ "This is a new line of text."

#body Source

body :: FFIComponent BaseAttributes

The <body> element in HTML, represents the content of an HTML document. There can be only one <body> element in a document.

Example:

body { } [ p { } "Hello, World!" ]

#blockquote Source

blockquote :: FFIComponent BlockquoteAttributes

The <blockquote> element in HTML, represents a section that is quoted from another source.

Content inside a <blockquote> must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

Example:

blockquote { cite: "https://www.example.com/source" } "Quotation from the cited source"

#bdo Source

bdo :: FFIComponent BdoAttributes

The <bdo> (Bi-directional Override) element in HTML, is used to override the current directionality of text. It causes the directionality of the characters to be ignored in favor of the specified directionality.

Example:

bdo { dir: dirRightToLeft } "This text will go right to left"

Note: It supports one attribute dir, which can have two valid values: ltr (Left-To-Right) or rtl (Right-To-Left).

#bdi Source

bdi :: FFIComponent BaseAttributes

The <bdi> (Bi-directional Isolation) element in HTML, isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown text direction.

Example:

bdi {} "Text in unknown direction"

#base Source

base :: FFIComponent_ BaseAttributes

The <base> element in HTML, which must be empty, specifies the base URL and or target for all relative URLs in a document. There can be only one <base> element in a document, and it must be inside the <head> element.

Example:

base { href: "https://www.example.com", target: targetBlank }

Note: It supports two attributes href and target. href specifies the base URL for all relative URLs in a document. target specifies the default target for all hyperlinks and forms in the document.

#b Source

b :: FFIComponent BaseAttributes

The <b> element in HTML, represents text which is stylistically different from normal text without any special importance. This could be a keyword or product name in a text. It's essentially used to draw the reader's attention to the element's contents, which are not otherwise granted special importance.

Example:

b { className: "bold-text" } "This is a bold text"

#audio Source

audio :: FFIComponent AudioAttributes

The <audio> element in HTML, is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element.

Example:

audio { src: "/media/sound.mp3", controls: true, autoplay: false } (a { href: "/media/sound.mp3" } "Download audio")

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|------------------|-------------| | src | String | "/path/to/audio"| The URL of the audio to embed. | | controls | Boolean| true | If this attribute is present, the browser will provide controls to allow the user to control audio playback. | | autoplay | Boolean| false | If specified, the audio will automatically begin playback as soon as it can do so without stopping to finish loading the data. | | loop | Boolean| false | If specified, the audio will automatically start over when finished. |

#aside Source

aside :: FFIComponent BaseAttributes

The <aside> element in HTML, represents a portion of a document whose content is only indirectly related to the document's main content. Asides are often used as sidebars or call-out boxes.

Example:

aside { className: "sidebar" } [ h1 {} "Sidebar Title", p {} "Sidebar content" ]

#article Source

article :: FFIComponent BaseAttributes

The <article> element in HTML, represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content.

Example:

article { className: "blog-post" } [ h1 {} "Blog Post Title", p {} "Content of the blog post" ]

#area Source

area :: FFIComponent_ BaseAttributes

The <area> element in HTML, defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element. area is a void element—it does not have any children

The shape attribute defines the shape of the area (rectangle, circle, or polygon), and the coords indicates the size of the area.

Example:

area { shape: "rect", coords: "34,44,270,350", href: "http://www.example.com" }

Common attributes: | Attribute | Type | Example | Description | |--------------|----------|----------------------------|-------------| | shape | String | "rect" | Defines the shape of the region. | | coords | String | "34,44,270,350" | A set of values specifying the coordinates of the hot-spot region. | | href | String | "http://www.example.com" | Specifies the hyperlink target for the area. | | alt | String | "Example Area" | Alternative text for the area. Used by screen readers for accessibility. |

#address Source

address :: FFIComponent BaseAttributes

The <address> tag in HTML, represents the contact information for its nearest <article> or <body> ancestor. If that is the <body>, then it applies to the whole document.

Example:

address { className: "contact-info" } "123 Example Street, Example City"

#abbr Source

abbr :: FFIComponent BaseAttributes

The <abbr> tag in HTML, used for specifying abbreviations.

Example:

abbr { title: "abbreviation" }
  "abbr"

#a_ Source

a_ :: FFIComponent_ AnchorAttributes

The <a> (anchor) tag in HTML, which is used to create hyperlinks.

#a Source

a :: FFIComponent AnchorAttributes

The <a> (anchor) tag in HTML, which is used to create hyperlinks. Most common attributes:

| Attribute | Type | Example | Description | |-------------------|----------|-------------------------------|-------------| | href | String | "https://example.com" | Specifies the URL that the hyperlink points to. | | target | Target | "targetBlank" | Determines where the linked document will open. | | download | String | "file.pdf" | Indicates that the target will be downloaded when a user clicks on the hyperlink. | | rel | String | "nofollow" | Describes the relationship between the current document and the linked document. | | title | String | "Go to the home page" | Renders additional information about an element, typically displayed as tooltip text. | | aria-label | String | "Read more about cats" | Used for accessibility, offering a description of the hyperlink's purpose for screen reader users. | | aria-describedby| String | "desc1" | Also used for accessibility, offering a description of the hyperlink's purpose for screen reader users. |

Re-exports from Beta.DOM.Internal

#FFIRawTextComponent Source

type FFIRawTextComponent :: Row Type -> Typetype FFIRawTextComponent props = forall givenProps nonDataProps. CoerceReactProps (Record givenProps) (Record nonDataProps) (Record props) => Record givenProps -> String -> JSX

#FFIComponent_ Source

type FFIComponent_ :: Row Type -> Typetype FFIComponent_ props = forall givenProps nonDataProps. CoerceReactProps (Record givenProps) (Record nonDataProps) (Record props) => Record givenProps -> JSX

#FFIComponent Source

type FFIComponent :: Row Type -> Typetype FFIComponent props = forall givenProps nonDataProps kids. IsJSX kids => CoerceReactProps (Record givenProps) (Record nonDataProps) (Record props) => Record givenProps -> kids -> JSX

#CSS Source

data CSS

An abstract type representing records of CSS attributes.

Instances

Semigroup CSS
Monoid CSS

#CoerceReactProps Source

class CoerceReactProps :: forall k. Type -> k -> Type -> Constraintclass CoerceReactProps props nonDataProps targetProps | props -> nonDataProps

Instances

(WithoutDataProps (Record props) (Record nonDataProps), Union nonDataProps missing targetProps) => CoerceReactProps (Record props) (Record nonDataProps) (Record targetProps)

#DoesStartWith Source

class DoesStartWith :: Symbol -> Symbol -> Boolean -> Constraintclass DoesStartWith (prefix :: Symbol) (full :: Symbol) (match :: Boolean) | prefix full -> match

A class that ensures a key in a row starts with a prefix.

Instances

DoesStartWith "" full True
DoesStartWith prefix "" False
(Cons prefixH prefixT prefix, Cons fullH fullT full, DoesStartWithChar prefixH prefixT fullH fullT match) => DoesStartWith prefix full match

#DoesStartWithChar Source

class DoesStartWithChar :: Symbol -> Symbol -> Symbol -> Symbol -> Boolean -> Constraintclass DoesStartWithChar (prefixH :: Symbol) (prefixT :: Symbol) (fullH :: Symbol) (fullT :: Symbol) (match :: Boolean) | prefixH prefixT fullH fullT -> match

Instances

(DoesStartWith prefix full match) => DoesStartWithChar c prefix c full match
DoesStartWithChar prefixH prefixT fullH fullT False

#IsJSX Source

class IsJSX a

Instances

#MaybeWithoutDataPropRL Source

class MaybeWithoutDataPropRL :: Boolean -> Symbol -> Type -> RowList Type -> RowList Type -> Constraintclass MaybeWithoutDataPropRL (exclude :: Boolean) (propName :: Symbol) (propVal :: Type) (from :: RowList Type) (to :: RowList Type) | exclude propName propVal from -> to

Instances

(WithoutDataPropsRL from to) => MaybeWithoutDataPropRL False propName propVal from (Cons propName propVal to)
(WithoutDataPropsRL from to) => MaybeWithoutDataPropRL True propName propVal from to

#WithoutDataProps Source

class WithoutDataProps props without  where

Members

unsafeHideDataProps :: props -> without

Instances

(RowToList r rl, ListToRow withoutRL without, WithoutDataPropsRL rl withoutRL) => WithoutDataProps (Record r) (Record without)

#WithoutDataPropsRL Source

class WithoutDataPropsRL :: RowList Type -> RowList Type -> Constraintclass WithoutDataPropsRL (from :: RowList Type) (to :: RowList Type) | from -> to

Instances

WithoutDataPropsRL Nil Nil
(DoesStartWith "data-" propName exclude, MaybeWithoutDataPropRL exclude propName propVal from to) => WithoutDataPropsRL (Cons propName propVal from) to

#unsafeWithChildrenImpl Source

unsafeWithChildrenImpl :: forall c p. Fn2 c p p

#unsafeWithChildren Source

unsafeWithChildren :: forall c p. c -> p -> p

#text Source

text :: String -> JSX

#noJSX Source

noJSX :: JSX

#modifyIfDefinedImpl Source

modifyIfDefinedImpl :: forall a b p. Fn3 String (a -> b) p p

#modifyIfDefined Source

modifyIfDefined :: forall a b p. String -> (a -> b) -> p -> p

#mergeStyles Source

mergeStyles :: Array CSS -> CSS

Merge styles from right to left. Uses Object.assign.

For example:

style: mergeCSS [ (css { padding: "5px" }), props.style ]

#css Source

css :: forall css. Record css -> CSS

Create a value of type CSS (which can be provided to the style property) from a plain record of CSS attributes.

For example:

div { style: css { padding: "5px" } } [ text "This text is padded." ]

#createElement_ Source

createElement_ :: forall props. ReactComponent props -> props -> JSX

#createElementNoKidsImpl Source

createElementNoKidsImpl :: forall component props. Fn2 component props JSX

#createElementImpl Source

createElementImpl :: forall component props children. Fn3 component props children JSX

#createElement Source

createElement :: forall props props_ children. IsJSX children => Cons "children" (ReactChildren JSX) props_ props => ReactComponent (Record props) -> Record props_ -> children -> JSX

#createBuiltinElement_ Source

createBuiltinElement_ :: forall props. String -> props -> JSX

#createBuiltinElement Source

createBuiltinElement :: forall props children. String -> props -> children -> JSX

#coerceReactProps Source

coerceReactProps :: forall props nonDataProps targetProps. CoerceReactProps props nonDataProps targetProps => props -> targetProps

#appendIsJSX Source

appendIsJSX :: forall a b. IsJSX a => IsJSX b => a -> b -> JSX

#(++) Source

Operator alias for Beta.DOM.Internal.appendIsJSX (right-associative / precedence 0)

Modules: Beta.DOM; Beta.DOM.Attributes; Beta.DOM.Attributes.AutoCapitalize; Beta.DOM.Attributes.Dir; Beta.DOM.Attributes.InputMode; Beta.DOM.Attributes.Target; Beta.DOM.Attributes.YesOrNo; Beta.DOM.Client; Beta.DOM.Event; Beta.DOM.HTML; Beta.DOM.HTML.A; Beta.DOM.HTML.Abbr; Beta.DOM.HTML.Address; Beta.DOM.HTML.Area; Beta.DOM.HTML.Article; Beta.DOM.HTML.Aside; Beta.DOM.HTML.Audio; Beta.DOM.HTML.B; Beta.DOM.HTML.Base; Beta.DOM.HTML.Bdi; Beta.DOM.HTML.Bdo; Beta.DOM.HTML.Blockquote; Beta.DOM.HTML.Body; Beta.DOM.HTML.Br; Beta.DOM.HTML.Button; Beta.DOM.HTML.Canvas; Beta.DOM.HTML.Caption; Beta.DOM.HTML.Cite; Beta.DOM.HTML.Code; Beta.DOM.HTML.Col; Beta.DOM.HTML.ColGroup; Beta.DOM.HTML.Data; Beta.DOM.HTML.DataList; Beta.DOM.HTML.Dd; Beta.DOM.HTML.Del; Beta.DOM.HTML.Details; Beta.DOM.HTML.Dfn; Beta.DOM.HTML.Dialog; Beta.DOM.HTML.Div; Beta.DOM.HTML.Dl; Beta.DOM.HTML.Dt; Beta.DOM.HTML.Em; Beta.DOM.HTML.Embed; Beta.DOM.HTML.FieldSet; Beta.DOM.HTML.Figcaption; Beta.DOM.HTML.Figure; Beta.DOM.HTML.Footer; Beta.DOM.HTML.Form; Beta.DOM.HTML.H; Beta.DOM.HTML.HTML; Beta.DOM.HTML.Head; Beta.DOM.HTML.Header; Beta.DOM.HTML.Hr; Beta.DOM.HTML.I; Beta.DOM.HTML.IFrame; Beta.DOM.HTML.Img; Beta.DOM.HTML.Input; Beta.DOM.HTML.Kbd; Beta.DOM.HTML.Label; Beta.DOM.HTML.Legend; Beta.DOM.HTML.Li; Beta.DOM.HTML.Link; Beta.DOM.HTML.Main; Beta.DOM.HTML.Map; Beta.DOM.HTML.Mark; Beta.DOM.HTML.Menu; Beta.DOM.HTML.Meta; Beta.DOM.HTML.Meter; Beta.DOM.HTML.Nav; Beta.DOM.HTML.NoScript; Beta.DOM.HTML.Object; Beta.DOM.HTML.Ol; Beta.DOM.HTML.Optgroup; Beta.DOM.HTML.Option; Beta.DOM.HTML.Output; Beta.DOM.HTML.P; Beta.DOM.HTML.Param; Beta.DOM.HTML.Picture; Beta.DOM.HTML.Pre; Beta.DOM.HTML.Progress; Beta.DOM.HTML.Q; Beta.DOM.HTML.Rp; Beta.DOM.HTML.Rt; Beta.DOM.HTML.Ruby; Beta.DOM.HTML.S; Beta.DOM.HTML.Samp; Beta.DOM.HTML.Script; Beta.DOM.HTML.Section; Beta.DOM.HTML.Select; Beta.DOM.HTML.Small; Beta.DOM.HTML.Source; Beta.DOM.HTML.Span; Beta.DOM.HTML.Strong; Beta.DOM.HTML.Style; Beta.DOM.HTML.Sub; Beta.DOM.HTML.Summary; Beta.DOM.HTML.Sup; Beta.DOM.HTML.Table; Beta.DOM.HTML.Tbody; Beta.DOM.HTML.Td; Beta.DOM.HTML.Template; Beta.DOM.HTML.Textarea; Beta.DOM.HTML.Tfoot; Beta.DOM.HTML.Th; Beta.DOM.HTML.Thead; Beta.DOM.HTML.Time; Beta.DOM.HTML.Title; Beta.DOM.HTML.Tr; Beta.DOM.HTML.Track; Beta.DOM.HTML.U; Beta.DOM.HTML.Ul; Beta.DOM.HTML.Var; Beta.DOM.HTML.Video; Beta.DOM.HTML.Wbr; Beta.DOM.Handler; Beta.DOM.Internal; Beta.DOM.Server