dom library

Jaspr APIs for building and styling DOM components.

Classes

a
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Angle
The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used by CSS functions like rotate() and in gradient angles.
Animation
The animation CSS property applies an animation between styles.
article
The <article> HTML element 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, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
aside
The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
AspectRatio
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.
AttrCheck
audio
The <audio> HTML element 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: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
b
The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text; instead, you should use the CSS font-weight property to create boldface text, or the <strong> element to indicate that text is of special importance.
BackgroundImage
The background-image CSS property sets one or more background images on an element. It accepts images (url()), gradients, and the keyword none.
BackgroundPosition
The background-position CSS property sets the initial position for each background image. The position is relative to the box established by background-origin.
BackgroundRepeat
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
BackgroundSize
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
blockquote
The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
body
The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.
Border
The border CSS property sets an element's border.
BorderRadius
Represents the CSS border-radius property.
BorderSide
Represents one side of a CSS Border.
BoxShadow
The box-shadow CSS property adds shadow effects around an element's frame. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. You can set multiple effects using BoxShadow.combine.
br
The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
button
The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.
caption
The <caption> HTML element specifies the caption (or title) of a table, providing the table an accessible description.
circle
The <circle> SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
code
The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
col
The <col> HTML element defines one or more columns in a column group represented by its parent <colgroup> element. The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined.
colgroup
The <colgroup> HTML element defines a group of columns within a table.
Color
A CSS color value.
Colors
Predefined CSS color names.
Cursor
The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
Curve
Describes the timing function of a transition.
datalist
The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
dd
The <dd> HTML element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
details
The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.
dialog
The <dialog> HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
div
The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
dl
The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
dt
The <dt> HTML element specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.
ellipse
The <ellipse> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
em
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.
embed
The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.
fieldset
The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.
figcaption
The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element, providing the <figure>> an accessible description.
figure
The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
Filter
CSS filter effects let you define a way of processing an element's rendering before the element is displayed in the document. Examples of such effects include blurring and changing the intensity of the color of an element.
Flex
Controls how a flex item consumes available space inside a flex container.
FontFamilies
A collection of generic and common font families.
FontFamily
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
FontStyle
The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.
form
The <form> HTML element represents a document section containing interactive controls for submitting information.
Gap
The gap CSS property sets the gaps (also called gutters) between rows and columns. This property applies to multi-column, flex, and grid containers.
GridAreas
Represents the grid areas defined in a grid layout.
GridPlacement
Describes where a grid item should be placed within a grid. It can place an item by naming a grid area, or by describing start/end lines for the item's row and column tracks. Use this to control the item's location and span inside its grid.
GridTemplate
The grid-template CSS property defines grid columns, grid rows, and grid areas.
GridTrack
Represents a single track in a grid layout, which can be a line, a size, or a repeated set of tracks.
GridTracks
Represents a list of grid tracks for rows or columns.
h1
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h2
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h3
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h4
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h5
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h6
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
hr
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.
html
The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
i
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. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.
iframe
The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.
ImageStyle
Helper representing an image style value such as url(...) or gradients.
img
The <img> HTML element embeds an image into the document.
input<T>
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
label
The <label> HTML element represents a caption for an item in a user interface.
legend
The <legend> HTML element represents a caption for the content of its parent <fieldset>.
li
The <li> HTML element 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>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
line
The <line> element is an SVG basic shape used to create a line connecting two points.
Linear
Tuple used with Curve.linear. The optional arguments are percentages between 0-100.
LinePlacement
Places an item by specifying grid lines or spans.
The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
main_
The <main> HTML element represents the primary content of a document, distinct from content that is repeated across multiple pages such as site headers, footers, and navigation bars.
MediaQuery
Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.
meta
The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base >, <link >, <script >, <style > or <title >.
meter
The <meter> HTML element represents either a scalar value within a known range or a fractional value.
The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
object
The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
ol
The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.
optgroup
The <optgroup> HTML element creates a grouping of options within a <select> element.
option
The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.
Outline
Represents the CSS outline property.
OutlineWidth
The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.
Overflow
The overflow CSS property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.
OverflowValue
The overflow CSS property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.
p
The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
path
The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.
polygon
The <polygon> element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
polyline
The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.
Position
The position CSS property sets how an element is positioned in a document
pre
The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.
progress
The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Quotes
The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.
Radius
Represents a corner radius used by BorderRadius.
RawText
Renders its text input as raw HTML.
rect
The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
s
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. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.
script
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.
section
The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
select
The <select> HTML element represents a control that provides a menu of options.
Selector
small
The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.
source
The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is an empty element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.
Spacing
Represents spacing properties such as padding and margin in CSS.
span
The <span> HTML element 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, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.
strong
The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
Style
Renders the provided list of styles into css and wraps them with a <style> element.
StyleRule
Styles
Represents a set of css styles.
StylesMixin<T>
summary
The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.
svg
The <svg> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
table
The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
tbody
The <tbody> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of a table's (main) data.
td
The <td> HTML element defines a cell of a table that contains data and may be used as a child of the <tr> element.
textarea
The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
TextDecoration
The text-decoration CSS property sets the appearance of decorative lines on text.
TextDecorationLine
The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.
TextDecorationThickness
The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
TextShadow
The text-shadow CSS property adds shadows to text.
tfoot
The <tfoot> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.
th
The <th> HTML element defines a cell as the header of a group of table cells and may be used as a child of the <tr> element. The exact nature of this group is defined by the scope and headers attributes.
thead
The <thead> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers (<th> elements).
tr
The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
TrackRepeat
Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
TrackSize
Represents the size of a grid track in a grid layout.
Transform
Represents the CSS transform property.
Transition
Represents the CSS transition property.
u
The <u> HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.
ul
The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
Unit
Represents a CSS unit value.
video
The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.
wbr
The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
ZIndex
The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.

Enums

AlignContent
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
AlignItems
The CSS align-items property sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.
AlignSelf
The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis.
All
The all CSS property resets all of an element's properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
AnimationDirection
The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
AnimationFillMode
The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.
AnimationPlayState
The animation-play-state CSS property sets whether an animation is running or paused.
Appearance
The appearance CSS property specifies the rendered appearance of replaced UI widget elements such as form controls. Most commonly, such elements are given native, platform-specific styling based on the operating system's theme, or a primitive appearance with styles that can be overridden using CSS.
AutoComplete
Indicates whether input elements can by default have their values automatically completed by the browser. autocomplete attributes on form elements override it on <form>.
BackgroundAlignX
BackgroundAlignY
BackgroundAttachment
The background-attachment CSS property sets whether a background image's position is fixed within the viewport or scrolls with its containing block.
BackgroundAxisRepeat
The background-repeat CSS property sets how background images are repeated. Per-axis values for the BackgroundRepeat property.
BackgroundClip
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
BackgroundOrigin
The background-origin CSS property sets the background's origin: which box (border-box, padding-box or content-box) the background's position is relative to.
BorderStyle
Keywords for the visual style of borders (e.g. dotted, solid, double).
BoxSizing
The box-sizing CSS property sets how the total width and height of an element is calculated.
ButtonType
Defines the default behavior of a button.
ColorScheme
The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g., light or dark mode) or a user agent setting.
Combinator
Contrast
The prefers-contrast CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
CrossOrigin
Indicates if the fetching of the media must be done using a CORS request. Media data from a CORS request can be reused in the <canvas> element without being marked "tainted". If the crossorigin attribute is not specified, then a non-CORS request is sent (without the Origin request header), and the browser marks the media as tainted and restricts access to its data, preventing its usage in <canvas> elements. If the crossorigin attribute is specified, then a CORS request is sent (with the Origin request header); but if the server does not opt into allowing cross-origin access to the media data by the origin site (by not sending any Access-Control-Allow-Origin response header, or by not including the site's origin in any Access-Control-Allow-Origin response header it does send), then the browser blocks the media from loading, and logs a CORS error to the devtools console.
Display
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
FlexDirection
The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
FlexWrap
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
FontWeight
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
FormEncType
The MIME type of a form submission.
FormMethod
The HTTP method to submit a form with.
InputType
The type for an <input> element.
JustifyContent
The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers.
JustifyItems
The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
JustifySelf
The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
ListStyle
The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
ListStylePosition
The list-style-position CSS property sets the position of the ::marker relative to a list item.
MediaLoading
Indicates how the browser should load the media. Loading is only deferred when JavaScript is enabled.
NumberingType
The numbering type for a list element.
Orientation
The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).
OutlineStyle
The style of an element's outline. An outline is a line that is drawn around an element, outside the border.
PointerEvents
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
Preload
Intended to provide a hint to the browser about what the author thinks will lead to the best user experience when loading a media object. The default value is different for each browser. The spec advises it to be set to Preload.metadata.
ReferrerPolicy
The Referrer-Policy controls how much referrer information (sent with the Referer header) should be included with requests.
SpellCheck
Specifies whether an element is subject to spell checking by the underlying browser/OS.
StepJump
Describes how the transition behaves at the start and end when using Curve.steps.
Target
The name/keyword for a browsing context (a tab, window, or <iframe>).
TextAlign
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.
TextDecorationLineKeyword
TextDecorationStyle
The text-decoration-style CSS property sets the style of the lines specified by TextDecorationLine.
TextOverflow
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (…), or display a custom string.
TextTransform
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
TextWrap
Indicates how the control wraps text.
UserSelect
The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.
Visibility
The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.
WhiteSpace
The white-space CSS property sets how white space inside an element is handled.

Extensions

AngleExt on num
Extension helpers to create Angle values from numeric literals.
DurationExt on int
SelectorMixin on Selector
UnitExt on num

Constants

css → const CssUtility
Styling utility to create nested style definitions.

Functions

events<V>({VoidCallback? onClick, ValueChanged<V>? onInput, ValueChanged<V>? onChange}) → Map<String, EventCallback>
Helper function to provide typed event handlers to the events property of html components.
fragment(List<Component> children, {Key? key}) → Component
Renders a list of children without any wrapping element.
raw(String text, {Key? key}) → Component
Renders its input as raw unescaped html using RawText.
text(String text, {Key? key}) → Component
Renders a text node.

Typedefs

Margin = Spacing
The margin CSS property sets the outer spacing of an element.
Padding = Spacing
The padding CSS property sets the inner spacing of an element.