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"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:3
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"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:4
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"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:5
AlignmentBaseline
AlignmentBaseline: "after-edge" | "alphabetic" | "auto" | "baseline" | "before-edge" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "text-after-edge" | "text-before-edge"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:6
Appearance
Appearance: "button" | "checkbox" | "none" | "scrollbarbutton-up"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:7
AttributeAnimatorDescriptor
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/attribute/AttributeAnimator.d.ts:34
Type parameters
AttributeAnimatorDescriptorExtends
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/attribute/AttributeAnimator.d.ts:35
Type parameters
AttributeAnimatorDescriptorFromAny
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/attribute/AttributeAnimator.d.ts:38
Type parameters
AttributeAnimatorMemberInit
Attribute
AnimatorMemberInit<V, K>: V [ K ] extends AttributeAnimator < any , infer T, infer U> ? T | U : never
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/attribute/AttributeAnimator.d.ts:9
Type parameters
AttributeAnimatorMemberKey
Attribute
AnimatorMemberKey<V, K>: V [ K ] extends AttributeAnimator < any , any > ? K : never
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/attribute/AttributeAnimator.d.ts:10
Type parameters
AttributeAnimatorMemberMap
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/attribute/AttributeAnimator.d.ts:11
Type parameters
AttributeAnimatorMemberType
Attribute
AnimatorMemberType<V, K>: V [ K ] extends AttributeAnimator < any , infer T, any > ? T : never
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/attribute/AttributeAnimator.d.ts:8
Type parameters
BackgroundClip
BackgroundClip: "border-box" | "padding-box" | "content-box" | "text"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:8
BorderCollapse
BorderCollapse: "collapse" | "separate"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:9
BorderStyle
BorderStyle: "dashed" | "dotted" | "double" | "groove" | "hidden" | "inset" | "none" | "outset" | "ridge" | "solid"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:10
BorderWidth
Border
Width: Length | "medium" | "thick" | "thin"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:11
BoxSizing
BoxSizing: "border-box" | "content-box"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:12
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"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:13
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"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:14
CssRuleDescriptor
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/css/CssRule.d.ts:15
Type parameters
CssRuleDescriptorExtends
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/css/CssRule.d.ts:16
Type parameters
CssRuleType
CssRuleType: "style" | "media"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/css/CssRule.d.ts:8
ElementViewMemberInit
Element
ViewMemberInit<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
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/element/ElementView.d.ts:15
Type parameters
ElementViewMemberKey
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/element/ElementView.d.ts:16
Type parameters
ElementViewMemberMap
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/element/ElementView.d.ts:17
Type parameters
ElementViewMemberType
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/element/ElementView.d.ts:14
Type parameters
FillRule
FillRule: "nonzero" | "evenodd" | "inherit"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:18
FlexBasis
Flex
Basis: Length | "auto" | "content" | "fill" | "fit-content" | "max-content" | "min-content"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:15
FlexDirection
FlexDirection: "column" | "column-reverse" | "row" | "row-reverse"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:16
FlexWrap
FlexWrap: "nowrap" | "wrap" | "wrap-reverse"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:17
Height
Height
: Length | string | "auto"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:19
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"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:20
MaxHeight
Max
Height: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content" | "none"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:21
MaxWidth
Max
Width: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content" | "none"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:22
MediaRuleDescriptor
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/css/MediaRule.d.ts:10
Type parameters
MediaRuleDescriptorExtends
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/css/MediaRule.d.ts:11
Type parameters
MinHeight
Min
Height: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:23
MinWidth
Min
Width: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:24
Overflow
Overflow: "auto" | "hidden" | "scroll" | "visible"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:25
OverscrollBehavior
OverscrollBehavior: "auto" | "contain" | "none"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:26
Paint
Paint
: Color | "none" | "context-fill" | "context-stroke" | "currentColor"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:27
PointerEvents
PointerEvents: "all" | "auto" | "fill" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:28
Position
Position: "absolute" | "fixed" | "relative" | "static" | "sticky"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:30
StrokeLinecap
StrokeLinecap: "butt" | "round" | "square"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:31
StyleAnimatorConstraintDescriptor
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimatorConstraint.d.ts:13
Type parameters
StyleAnimatorConstraintDescriptorExtends
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimatorConstraint.d.ts:14
Type parameters
StyleAnimatorConstraintDescriptorFromAny
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimatorConstraint.d.ts:17
Type parameters
StyleAnimatorDescriptor
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimator.d.ts:35
Type parameters
StyleAnimatorDescriptorExtends
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimator.d.ts:36
Type parameters
StyleAnimatorDescriptorFromAny
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimator.d.ts:39
Type parameters
StyleAnimatorMemberInit
Style
AnimatorMemberInit<V, K>: V [ K ] extends StyleAnimator < any , infer T, infer U> ? T | U : never
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimator.d.ts:9
Type parameters
StyleAnimatorMemberKey
Style
AnimatorMemberKey<V, K>: V [ K ] extends StyleAnimator < any , any > ? K : never
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimator.d.ts:10
Type parameters
StyleAnimatorMemberMap
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimator.d.ts:11
Type parameters
StyleAnimatorMemberType
Style
AnimatorMemberType<V, K>: V [ K ] extends StyleAnimator < any , infer T, any > ? T : never
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/StyleAnimator.d.ts:8
Type parameters
StyleRuleDescriptor
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/css/StyleRule.d.ts:16
Type parameters
StyleRuleDescriptorExtends
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/css/StyleRule.d.ts:17
Type parameters
SvgPointerEvents
SvgPointerEvents: "all" | "auto" | "bounding-box" | "fill" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:29
TextAlign
TextAlign: "center" | "end" | "justify" | "justify-all" | "left" | "match-parent" | "right" | "start"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:32
TextAnchor
TextAnchor: "end" | "inherit" | "middle" | "start"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:33
TextDecorationStyle
TextDecorationStyle: "dashed" | "dotted" | "double" | "solid" | "wavy"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:34
TextTransform
TextTransform: "capitalize" | "full-width" | "lowercase" | "none" | "uppercase"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:35
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"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:36
UserSelect
UserSelect: "all" | "auto" | "contain" | "none" | "text"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:37
VerticalAlign
Vertical
Align: Length | "baseline" | "sub" | "super" | "text-top" | "text-bottom" | "middle" | "top" | "bottom"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:38
ViewNodeType
ViewNodeType<V>: V extends { node: infer N } ? N : never
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/node/NodeView.d.ts:8
Type parameters
Visibility
Visibility: "collapse" | "hidden" | "visible"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:39
WhiteSpace
WhiteSpace: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:40
Width
Width
: Length | string | "auto" | "available" | "fit-content" | "max-content" | "min-content"
Defined in swim-toolkit-js/swim-ui-js/@swim/dom/lib/main/style/types.d.ts:41
@swim/dom
@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 intonode_modules/@swim/dom/main
. Transpiled JavaScript and TypeScript definition files install intonode_modules/@swim/dom/lib/main
. And a pre-built UMD script can be found innode_modules/@swim/dom/dist/main/swim-dom.js
.Browser
Browser applications can load
swim-ui.js
—which bundles the @swim/dom library—along with itsswim-core.js
dependency, directly from the SwimOS CDN.Alternatively, the
swim-toolkit.js
script may be loaded, along with itsswim-system.js
dependency, from the SwimOS CDN. Theswim-toolkit.js
script bundles @swim/dom together with all other @swim/toolkit frameworks.Usage
ES6/TypeScript
@swim/dom can be imported as an ES6 module from TypeScript and other ES6-compatible environments.
CommonJS/Node.js
@swim/dom can also be used as a CommonJS module in Node.js applications.
Browser
When loaded by a web browser, the
swim-ui.js
script adds all @swim/dom library exports to the globalswim
namespace. Theswim-ui.js
script requires thatswim-core.js
has already been loaded.The
swim-toolkit.js
script also adds all @swim/dom library exports to the globalswim
namespace, making it a drop-in replacement forswim-ui.js
andswim-dom.js
when additional @swim/toolkit frameworks are needed.