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.

.group() static

<PropertyNamesT extends string>(...styles: { [P in PropertyNamesT]?: UIStyle | Partial<StyleObjects>; }[]): { [P in PropertyNamesT]: UIStyle; }

Create an object that contains all of the given styles and/or styles from other groups; if the object contains a property that already existed in a given group, the original style is extended (see extend()).

.isStyleOverride() static

<K extends keyof StyleObjects>(object?: StyleObjects[K], style?: UIStyle): boolean

Returns true if given object does not belong to given instance of UIStyle.

.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 UIStyle instance; 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 (objects), with a new ID and optionally a new name. Creates a new instance each time, unlike mixin.

.addState()

(name: keyof ConditionalStyles, 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.Offsets

type Offsets = string | number | {
x?: string | number;
y?: string | number;
top?: string | number;
bottom?: string | number;
left?: string | number;
right?: string | number;
};

Type definition for padding, margin, or border measurements.


UIStyle.ConditionalStyles

Type definition for an object with conditional styles.


UIStyle.StyleObjects

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

.dimensions

Readonly<Dimensions>

Options for the dimensions of a UI component.

.position

Readonly<Position>

Options for component positioning within parent component(s).

.textStyle

Readonly<TextStyle>

Options for styles of a UI component that shows text.

.decoration

Readonly<Decoration>

Options for the appearance of UI components, including miscellaneous CSS attributes and class names.

.containerLayout

Readonly<ContainerLayout>

Options for layout of child components of a container component.


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" | "stretch" | "end" | "center" | "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 | UIColor

Text color (UIColor or string).

.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.Decoration

Options for the appearance of UI components, including miscellaneous CSS attributes and class names.

.background

string | UIColor

Background style or color (UIColor or string).

.textColor

string | UIColor

Text color (UIColor or string); this may be overridden by UIStyle.TextStyle.color if specified on the same component or a child component.

.borderColor

string | UIColor

Border color (UIColor or string).

.borderStyle

string

Border style (CSS), defaults to “solid”.

.borderThickness

Offsets

Border thickness (in dp or CSS string, or separate offset values).

.borderRadius

string | number

Border radius (in dp or CSS string).

.padding

Offsets

Padding within control element (in dp or CSS string, or separate offset values).

.dropShadow

number

Drop shadow distance (0-1).

.opacity

number

Opacity (0-1).

.css

Partial<CSSStyleDeclaration>

Miscellaneous CSS attributes.

.cssClassNames

string[]

Miscellaneous CSS class names (array).


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" | "stretch" | "end" | "center" | "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.

.separator

Readonly<SeparatorOptions>

Options for separator between each component.


UIStyle.SeparatorOptions

Separator style, for use with containers and lists.

.vertical

boolean

True for vertical line, or width-only spacer.

.space

string | number

Width/height of separator space (CSS length or dp).

.lineThickness

string | number

Separator line thickness (CSS length or dp).

.lineColor

string | UIColor

Line separator color (UIColor or string), defaults to @separator.

.lineMargin

string | number

Line separator margin (CSS length or dp).