Documentation

UIStyle

class UIStyle

Encapsulation of a set of styles to be applied to a UI component.

Constructor

(name?: string, base?: UIStyle, ...styles: Partial<StyleObjects>[]): UIStyle

.create() static

[1]. (styles?: Partial<StyleObjects>): UIStyle
[2]. (name: string, styles: Partial<StyleObjects>): UIStyle

[1] Create a new anonymous style set from scratch using given style objects

[2] Create a new style set from scratch using given style objects, with given name.

.isStyleOverride() static

<K extends "dimensions" | "position" | "textStyle" | "controlStyle" | "containerLayout">(object: StyleObjects[K]): boolean

Returns true if given object does not belong to an instance of UIStyle (i.e. overridden with a plain object).

.name

string

Human readable name for this style.

.id

string

Arbitrary ID for this style, contains sanitized name token.

.ids

readonly string[]

List of IDs which includes the current ID as well as inherited IDs.

.inherited

readonly UIStyle[]

List of inherited styles.

.conditionalStyles

ConditionalStyles

Referenced conditional styles (should be added using UIStyle.addState).

.mixin()

(style: UIStyle): UIStyle

Returns a new style set that contains all current styles as well as the styles from given style set; the result is reused when the exact same style sets are mixed again.

.extend()

(objects: Partial<StyleObjects>, name?: string): UIStyle

Returns a new style set that contains all current styles as well as given styles, with a new ID and optionally a new name.

.addState()

(name: "pressed" | "hover" | "focused" | "disabled" | "selected", objects: Partial<StyleObjects>): this

Add or extend a conditional style with given style set.

.getStyles()

(): Readonly<StyleObjects>

Returns all individual style objects as read-only objects.

.getOwnStyles()

(): Partial<StyleObjects>

Returns all styles that are unique to this instance, as read-only objects.


UIStyle.ConditionalStyles

Type definition for an object with conditional styles.


UIStyle.StyleObjects

Collection of individual objects that represent a (partial) style.


UIStyle.Dimensions

Options for the dimensions of a UI component.

.width

string | number

Outer width of the element, as specified (in dp or string with unit).

.height

string | number

Outer height of the element, as specified (in dp or string with unit).

.minWidth

string | number

Minimum width of the element, as specified (in dp or string with unit).

.maxWidth

string | number

Maximum width of the element, as specified (in dp or string with unit).

.minHeight

string | number

Minimum height of the element, as specified (in dp or string with unit).

.maxHeight

string | number

Maximum height of the element, as specified (in dp or string with unit).

.grow

number

Growth quotient (0 for no growth, higher values for faster growth when needed).

.shrink

number

Shrink quotient (0 to never shrink, higher values for faster shrinking when needed).


UIStyle.Position

Options for component positioning within parent component(s).

.gravity

"" | "start" | "end" | "center" | "stretch" | "baseline" | "overlay"

Position of the component in the direction perpendicular to the distribution axis of the parent component, or overlay if the component should be placed on top of other components (i.e. CSS absolute positioning).

.top

string | number

Top anchor: relative distance, or absolute position if gravity is ‘overlay’ (in dp or string with unit, defaults to auto).

.bottom

string | number

Bottom anchor: relative distance, or absolute position if gravity is ‘overlay’ (in dp or string with unit, defaults to auto).

.left

string | number

Left anchor: relative distance, or absolute position if gravity is ‘overlay’ (in dp or string with unit, defaults to auto).

.right

string | number

Right anchor: relative distance, or absolute position if gravity is ‘overlay’ (in dp or string with unit, defaults to auto).


UIStyle.TextStyle

Options for styles of a UI component that shows text.

.align

string

Text alignment (CSS).

.color

string

Text color (see UITheme.replaceColor).

.fontFamily

string

Font family (CSS).

.fontSize

string | number

Font size (dp or string with unit).

.fontWeight

string | number

Font weight (CSS).

.letterSpacing

string | number

Letter spacing (dp or string with unit).

.lineHeight

string | number

Line height (CSS relative to font size, not in dp).

.lineBreakMode

"" | "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "ellipsis" | "clip"

Line break handling mode (CSS white-space).

.bold

boolean

True for bold text (overrides fontWeight value).

.italic

boolean

True for italic text.

.uppercase

boolean

True for all-uppercase text.

.smallCaps

boolean

True for text using small caps.

.underline

boolean

True for underlined text.

.strikeThrough

boolean

True for struck trough text.


UIStyle.ControlStyle

Miscellaneous style options for control components, including all CSS attributes and classes.

.background

string

Background style or color (see UITheme.replaceColor).

.border

string

Border style or color (see UITheme.replaceColor).

.borderRadius

string | number

Border radius (in dp or CSS string, defaults to 0).

.dropShadow

number

Drop shadow distance (0-1).

.css

Partial<CSSStyleDeclaration>

Miscellaneous CSS attributes.

.cssClassNames

string[]

Miscellaneous CSS class names.


UIStyle.ContainerLayout

Options for layout of child components of a container component (only exists on UIContainer instances).

.axis

"" | "horizontal" | "vertical"

Axis along which content is distributed (defaults to vertical).

.distribution

"" | "start" | "end" | "center" | "fill" | "space-around"

Positioning of content along the distribution axis (defaults to start).

.gravity

"" | "start" | "end" | "center" | "stretch" | "baseline"

Positioning of content perpendicular to the distribution axis (defaults to stretch).

.wrapContent

boolean

True if content should wrap to new line/column if needed (defaults to false).

.clip

boolean

True if content should be clipped within this container.


UIStyle.SeparatorOptions

Separator style, for use with containers and lists.

.type

"line" | "spacer"

Separator type, defaults to line.

.color

string

Separator line color (see UITheme.replaceColor), defaults to @separator.

.thickness

string | number

Separator thickness (CSS length or dp).

.margin

string | number

Separator margin (CSS length or dp).