Options
All
  • Public
  • Public/Protected
  • All
Menu

Namespace @swim/style

@swim/style

package documentation chat

@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 into node_modules/@swim/style/main. Transpiled JavaScript and TypeScript definition files install into node_modules/@swim/style/lib/main. And a pre-built UMD script can be found in node_modules/@swim/style/dist/main/swim-style.js.

Browser

Browser applications can load swim-ui.js—which bundles the @swim/style 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/style 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/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 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/style library exports to the global swim namespace, making it a drop-in replacement for swim-ui.js and swim-style.js when additional @swim/toolkit frameworks are needed.

Index

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"

AnyStyleValue

Appearance

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

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"

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"

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"

StyleValue

StyleValue: DateTime | Angle | Length | Color | Font | BoxShadow | Transform | Interpolator<any> | Scale<any, any> | Transition<any> | number | boolean

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"

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"

Functions

AttributeString

  • AttributeString(value: unknown): string

StyleString

  • StyleString(value: unknown): string

Object literals

Const StyleValue

StyleValue: object

form

fromAny

interpolatorForm

parse

scaleForm

transitionForm