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
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
Border thickness (in dp or CSS string, or separate offset values).
.borderRadius
string | number
Border radius (in dp or CSS string).
.padding
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).