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"
BorderCollapse
BorderCollapse: "collapse" | "separate"
BorderStyle
BorderStyle: "dashed" | "dotted" | "double" | "groove" | "hidden" | "inset" | "none" | "outset" | "ridge" | "solid"
BorderWidth
Border
Width: Length | "medium" | "thick" | "thin"
BoxShadowArray
BoxShadowArray: object
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"
FillRule
FillRule: "nonzero" | "evenodd" | "inherit"
FlexBasis
Flex
Basis: 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
Max
Height: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content" | "none"
MaxWidth
Max
Width: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content" | "none"
MinHeight
Min
Height: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content"
MinWidth
Min
Width: Length | string | "fill-available" | "fit-content" | "max-content" | "min-content"
Overflow
Overflow: "auto" | "hidden" | "scroll" | "visible"
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"
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"
UserSelect
UserSelect: "all" | "auto" | "contain" | "none" | "text"
VerticalAlign
Vertical
Align: Length | "baseline" | "sub" | "super" | "text-top" | "text-bottom" | "middle" | "top" | "bottom"
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"
@swim/style
@swim/style provides CSS style types, and implements a universal style value parser. @swim/style is part of the @swim/ui framework.
Installation
npm
For an npm-managed project,
npm install @swim/style
to make it a dependency. TypeScript sources will be installed intonode_modules/@swim/style/main
. Transpiled JavaScript and TypeScript definition files install intonode_modules/@swim/style/lib/main
. And a pre-built UMD script can be found innode_modules/@swim/style/dist/main/swim-style.js
.Browser
Browser applications can load
swim-ui.js
—which bundles the @swim/style library—along with itsswim-core.js
dependency, directly from the Swim CDN.<script src="https://cdn.swim.ai/js/latest/swim-core.js"></script> <script src="https://cdn.swim.ai/js/latest/swim-ui.js"></script>
Alternatively, the standalone
swim-system.js
script may be loaded from the Swim CDN, which bundles @swim/style together with all other @swim/system libraries.<script src="https://cdn.swim.ai/js/latest/swim-system.js"></script>
Usage
ES6/TypeScript
@swim/style can be imported as an ES6 module from TypeScript and other ES6-compatible environments.
import * as style from "@swim/style";
CommonJS/Node.js
@swim/style can also be used as a CommonJS module in Node.js applications.
var style = require("@swim/style");
Browser
When loaded by a web browser, the
swim-ui.js
script adds all @swim/style library exports to the globalswim
namespace. Theswim-ui.js
script requires thatswim-core.js
has already been loaded.The
swim-system.js
script also adds all @swim/style library exports to the globalswim
namespace, making it a drop-in replacement for 'swim-core.js' andswim-ui.js
when additional @swim/system libraries are needed.