Options
All
  • Public
  • Public/Protected
  • All
Menu

Library @swim/dom

@swim/dom

package documentation chat

@swim/dom implements HTML and SVG views, with procedural attribute and style animators. @swim/dom is part of the @swim/ui framework.

Installation

npm

For an npm-managed project, npm install @swim/dom to make it a dependency. TypeScript sources will be installed into node_modules/@swim/dom/main. Transpiled JavaScript and TypeScript definition files install into node_modules/@swim/dom/lib/main. And a pre-built UMD script can be found in node_modules/@swim/dom/dist/main/swim-dom.js.

Browser

Browser applications can load swim-ui.js—which bundles the @swim/dom library—along with its swim-core.js dependency, directly from the SwimOS CDN.

<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-core.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.js"></script>

<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-core.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script>

Alternatively, the swim-toolkit.js script may be loaded, along with its swim-system.js dependency, from the SwimOS CDN. The swim-toolkit.js script bundles @swim/dom together with all other @swim/toolkit frameworks.

<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-system.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.js"></script>

<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.min.js"></script>

Usage

ES6/TypeScript

@swim/dom can be imported as an ES6 module from TypeScript and other ES6-compatible environments.

import * as dom from "@swim/dom";

CommonJS/Node.js

@swim/dom can also be used as a CommonJS module in Node.js applications.

var dom = require("@swim/dom");

Browser

When loaded by a web browser, the swim-ui.js script adds all @swim/dom library exports to the global swim namespace. The swim-ui.js script requires that swim-core.js has already been loaded.

The swim-toolkit.js script also adds all @swim/dom library exports to the global swim namespace, making it a drop-in replacement for swim-ui.js and swim-dom.js when additional @swim/toolkit frameworks are needed.

Index

Classes

Interfaces

Type aliases

Variables

Type aliases

AlignContent

AlignContent: "baseline" | "center" | "end" | "first baseline" | "flex-end" | "flex-start" | "last baseline" | "left" | "right" | "safe center" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | "unsafe center"

AlignItems

AlignItems: "baseline" | "center" | "end" | "first baseline" | "flex-end" | "flex-start" | "last baseline" | "left" | "normal" | "right" | "safe center" | "self-end" | "self-start" | "start" | "stretch" | "unsafe center"

AlignSelf

AlignSelf: "auto" | "baseline" | "center" | "end" | "first baseline" | "flex-end" | "flex-start" | "last baseline" | "left" | "normal" | "right" | "safe center" | "self-end" | "self-start" | "start" | "stretch" | "unsafe center"

AlignmentBaseline

AlignmentBaseline: "after-edge" | "alphabetic" | "auto" | "baseline" | "before-edge" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "text-after-edge" | "text-before-edge"

Appearance

Appearance: "button" | "checkbox" | "none" | "scrollbarbutton-up"

AttributeAnimatorDescriptor

AttributeAnimatorDescriptor<V, T, U, I>: AttributeAnimatorInit<T, U> & ThisType<AttributeAnimator<V, T, U> & I> & Partial<I>

Type parameters

AttributeAnimatorDescriptorExtends

AttributeAnimatorDescriptorExtends<V, T, U, I>: { extends: AttributeAnimatorClass | undefined } & AttributeAnimatorDescriptor<V, T, U, I>

Type parameters

AttributeAnimatorDescriptorFromAny

AttributeAnimatorDescriptorFromAny<V, T, U, I>: { type: FromAny<T, U> } | { fromAny: any } & AttributeAnimatorDescriptor<V, T, U, I>

Type parameters

AttributeAnimatorMemberInit

AttributeAnimatorMemberInit<V, K>: V[K] extends AttributeAnimator<any, infer T, infer U> ? T | U : never

Type parameters

  • V

  • K: keyof V

AttributeAnimatorMemberKey

AttributeAnimatorMemberKey<V, K>: V[K] extends AttributeAnimator<any, any> ? K : never

Type parameters

  • V

  • K: keyof V

AttributeAnimatorMemberMap

AttributeAnimatorMemberMap<V>: {-readonly [ K in keyof V as AttributeAnimatorMemberKey<V, K>]-?: AttributeAnimatorMemberInit<V, K> }

Type parameters

  • V

AttributeAnimatorMemberType

AttributeAnimatorMemberType<V, K>: V[K] extends AttributeAnimator<any, infer T, any> ? T : never

Type parameters

  • V

  • K: keyof V

BackgroundClip

BackgroundClip: "border-box" | "padding-box" | "content-box" | "text"

BorderCollapse

BorderCollapse: "collapse" | "separate"

BorderStyle

BorderStyle: "dashed" | "dotted" | "double" | "groove" | "hidden" | "inset" | "none" | "outset" | "ridge" | "solid"

BorderWidth

BorderWidth: Length | "medium" | "thick" | "thin"

BoxSizing

BoxSizing: "border-box" | "content-box"

CssCursor

CssCursor: "alias" | "all-scroll" | "auto" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "move" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "none" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out"

CssDisplay

CssDisplay: "block" | "contents" | "flex" | "flow" | "flow-root" | "grid" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "none" | "ruby" | "ruby-base" | "ruby-base-container" | "ruby-text" | "ruby-text-container" | "run-in" | "table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group"

CssRuleDescriptor

CssRuleDescriptor<V, I>: CssRuleInit & ThisType<CssRule<V> & I> & Partial<I>

Type parameters

CssRuleDescriptorExtends

CssRuleDescriptorExtends<V, I>: { extends: CssRuleClass | undefined } & CssRuleDescriptor<V, I>

Type parameters

CssRuleType

CssRuleType: "style" | "media"

ElementViewMemberInit

ElementViewMemberInit<V, K>: V[K] extends ViewProperty<any, infer T, infer U> ? T | U : V[K] extends ViewAnimator<any, infer T, infer U> ? T | U : V[K] extends StyleAnimator<any, infer T, infer U> ? T | U : V[K] extends AttributeAnimator<any, infer T, infer U> ? T | U : never

Type parameters

  • V

  • K: keyof V

ElementViewMemberKey

ElementViewMemberKey<V, K>: V[K] extends ViewProperty<any, any> ? K : V[K] extends ViewAnimator<any, any> ? K : V[K] extends StyleAnimator<any, any> ? K : V[K] extends AttributeAnimator<any, any> ? K : never

Type parameters

  • V

  • K: keyof V

ElementViewMemberMap

ElementViewMemberMap<V>: {-readonly [ K in keyof V as ElementViewMemberKey<V, K>]-?: ElementViewMemberInit<V, K> }

Type parameters

  • V

ElementViewMemberType

ElementViewMemberType<V, K>: V[K] extends ViewProperty<any, infer T, any> ? T : V[K] extends ViewAnimator<any, infer T, any> ? T : V[K] extends StyleAnimator<any, infer T, any> ? T : V[K] extends AttributeAnimator<any, infer T, any> ? T : never

Type parameters

  • V

  • K: keyof V

FillRule

FillRule: "nonzero" | "evenodd" | "inherit"

FlexBasis

FlexBasis: Length | "auto" | "content" | "fill" | "fit-content" | "max-content" | "min-content"

FlexDirection

FlexDirection: "column" | "column-reverse" | "row" | "row-reverse"

FlexWrap

FlexWrap: "nowrap" | "wrap" | "wrap-reverse"

Height

Height: Length | string | "auto"

JustifyContent

JustifyContent: "baseline" | "center" | "end" | "first baseline" | "flex-end" | "flex-start" | "last baseline" | "left" | "right" | "safe center" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | "unsafe center"

MaxHeight

MaxHeight: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content" | "none"

MaxWidth

MaxWidth: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content" | "none"

MediaRuleDescriptor

MediaRuleDescriptor<V, I>: MediaRuleInit & ThisType<MediaRule<V> & I> & Partial<I>

Type parameters

MediaRuleDescriptorExtends

MediaRuleDescriptorExtends<V, I>: { extends: MediaRuleClass | undefined } & MediaRuleDescriptor<V, I>

Type parameters

MinHeight

MinHeight: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content"

MinWidth

MinWidth: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content"

Overflow

Overflow: "auto" | "hidden" | "scroll" | "visible"

OverscrollBehavior

OverscrollBehavior: "auto" | "contain" | "none"

Paint

Paint: Color | "none" | "context-fill" | "context-stroke" | "currentColor"

PointerEvents

PointerEvents: "all" | "auto" | "fill" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"

Position

Position: "absolute" | "fixed" | "relative" | "static" | "sticky"

StrokeLinecap

StrokeLinecap: "butt" | "round" | "square"

StyleAnimatorConstraintDescriptor

StyleAnimatorConstraintDescriptor<V, T, U, I>: StyleAnimatorConstraintInit<T, U> & ThisType<StyleAnimatorConstraint<V, T, U> & I> & Partial<I>

Type parameters

StyleAnimatorConstraintDescriptorExtends

StyleAnimatorConstraintDescriptorExtends<V, T, U, I>: { extends: StyleAnimatorConstraintClass | undefined } & StyleAnimatorConstraintDescriptor<V, T, U, I>

Type parameters

StyleAnimatorConstraintDescriptorFromAny

StyleAnimatorConstraintDescriptorFromAny<V, T, U, I>: { type: FromAny<T, U> } | { fromAny: any } & StyleAnimatorConstraintDescriptor<V, T, U, I>

Type parameters

StyleAnimatorDescriptor

StyleAnimatorDescriptor<V, T, U, I>: StyleAnimatorInit<T, U> & ThisType<StyleAnimator<V, T, U> & I> & Partial<I>

Type parameters

StyleAnimatorDescriptorExtends

StyleAnimatorDescriptorExtends<V, T, U, I>: { extends: StyleAnimatorClass | undefined } & StyleAnimatorDescriptor<V, T, U, I>

Type parameters

StyleAnimatorDescriptorFromAny

StyleAnimatorDescriptorFromAny<V, T, U, I>: { type: FromAny<T, U> } | { fromAny: any } & StyleAnimatorDescriptor<V, T, U, I>

Type parameters

StyleAnimatorMemberInit

StyleAnimatorMemberInit<V, K>: V[K] extends StyleAnimator<any, infer T, infer U> ? T | U : never

Type parameters

  • V

  • K: keyof V

StyleAnimatorMemberKey

StyleAnimatorMemberKey<V, K>: V[K] extends StyleAnimator<any, any> ? K : never

Type parameters

  • V

  • K: keyof V

StyleAnimatorMemberMap

StyleAnimatorMemberMap<V>: {-readonly [ K in keyof V as StyleAnimatorMemberKey<V, K>]-?: StyleAnimatorMemberInit<V, K> }

Type parameters

  • V

StyleAnimatorMemberType

StyleAnimatorMemberType<V, K>: V[K] extends StyleAnimator<any, infer T, any> ? T : never

Type parameters

  • V

  • K: keyof V

StyleRuleDescriptor

StyleRuleDescriptor<V, I>: StyleRuleInit & ThisType<StyleRule<V> & I> & Partial<I>

Type parameters

StyleRuleDescriptorExtends

StyleRuleDescriptorExtends<V, I>: { extends: StyleRuleClass | undefined } & StyleRuleDescriptor<V, I>

Type parameters

SvgPointerEvents

SvgPointerEvents: "all" | "auto" | "bounding-box" | "fill" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"

TextAlign

TextAlign: "center" | "end" | "justify" | "justify-all" | "left" | "match-parent" | "right" | "start"

TextAnchor

TextAnchor: "end" | "inherit" | "middle" | "start"

TextDecorationStyle

TextDecorationStyle: "dashed" | "dotted" | "double" | "solid" | "wavy"

TextTransform

TextTransform: "capitalize" | "full-width" | "lowercase" | "none" | "uppercase"

TouchAction

TouchAction: "auto" | "manipulation" | "none" | "pan-down" | "pan-down pinch-zoom" | "pan-left" | "pan-left pan-down" | "pan-left pan-down pinch-zoom" | "pan-left pan-up" | "pan-left pan-up pinch-zoom" | "pan-left pan-y" | "pan-left pan-y pinch-zoom" | "pan-left pinch-zoom" | "pan-right" | "pan-right pan-down" | "pan-right pan-down pinch-zoom" | "pan-right pan-up" | "pan-right pan-up pinch-zoom" | "pan-right pan-y" | "pan-right pan-y pinch-zoom" | "pan-right pinch-zoom" | "pan-up" | "pan-up pinch-zoom" | "pan-x" | "pan-x pan-down" | "pan-x pan-down pinch-zoom" | "pan-x pan-up" | "pan-x pan-up pinch-zoom" | "pan-x pan-y" | "pan-x pan-y pinch-zoom" | "pan-x pinch-zoom" | "pan-y" | "pan-y pinch-zoom" | "pinch-zoom"

UserSelect

UserSelect: "all" | "auto" | "contain" | "none" | "text"

VerticalAlign

VerticalAlign: Length | "baseline" | "sub" | "super" | "text-top" | "text-bottom" | "middle" | "top" | "bottom"

ViewNodeType

ViewNodeType<V>: V extends { node: infer N } ? N : never

Type parameters

Visibility

Visibility: "collapse" | "hidden" | "visible"

WhiteSpace

WhiteSpace: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"

Width

Width: Length | string | "auto" | "available" | "fit-content" | "max-content" | "min-content"

Variables

AttributeAnimator

AttributeAnimator: { prototype: AttributeAnimator<any, any, never>; define: any; getClass: any }

Type declaration

CssContext

CssContext: { decorateCssRule: any; getCssRuleConstructor: any }

Type declaration

  • decorateCssRule: function
    • Parameters

      Returns void

  • getCssRuleConstructor: function
    • Parameters

      Returns null | CssRuleConstructor<any, {}>

CssRule

CssRule: { prototype: CssRule<any>; define: any }

Type declaration

MediaRule

MediaRule: { prototype: MediaRule<any>; define: any }

Type declaration

StyleAnimator

StyleAnimator: { prototype: StyleAnimator<any, any, never>; define: any; getClass: any }

Type declaration

StyleAnimatorConstraint

StyleAnimatorConstraint: { prototype: StyleAnimatorConstraint<any, any, never>; define: any; getClass: any }

Type declaration

StyleContext

StyleContext: { decorateStyleAnimator: any; getStyleAnimatorConstructor: any }

Type declaration

  • decorateStyleAnimator: function
    • Parameters

      Returns void

  • getStyleAnimatorConstructor: function
    • Parameters

      Returns null | StyleAnimatorConstructor<any, unknown, never, {}>

StyleMap

StyleMap: { define: any; init: any }

Type declaration

  • define: function
    • Parameters

      Returns void

  • init: function
    • Parameters

      Returns void

StyleRule

StyleRule: { prototype: StyleRule<any>; define: any }

Type declaration

Generated using TypeDoc