API Referencetype

type StyleOverrides

A type that defines style properties for UI elements.

type StyleOverrides = {
  width?: string | number;
  height?: string | number;
  minWidth?: string | number;
  maxWidth?: string | number;
  minHeight?: string | number;
  maxHeight?: string | number;
  flexGrow?: number;
  flexShrink?: number;
  padding?: StyleOverrides.Offsets;
  margin?: StyleOverrides.Offsets;
  opacity?: number;
  textDirection?: "rtl" | "ltr";
  textAlign?: string;
  fontFamily?: string;
  fontSize?: string | number;
  fontWeight?: string | number;
  letterSpacing?: string | number;
  tabularNums?: boolean;
  lineHeight?: string | number;
  lineBreakMode?:
    | "normal"
    | "nowrap"
    | "pre"
    | "pre-wrap"
    | "pre-line"
    | "ellipsis"
    | "clip"
    | "";
  bold?: boolean;
  italic?: boolean;
  uppercase?: boolean;
  smallCaps?: boolean;
  underline?: boolean;
  strikeThrough?: boolean;
  userTextSelect?: boolean;
  background?: UIColor.BackgroundType;
  textColor?: UIColor;
  borderColor?:
    | UIColor
    | {
        top?: UIColor;
        bottom?: UIColor;
        left?: UIColor;
        right?: UIColor;
        start?: UIColor;
        end?: UIColor;
      };
  borderStyle?: string;
  borderWidth?: StyleOverrides.Offsets;
  borderRadius?:
    | string
    | number
    | {
        topLeft?: string | number;
        topRight?: string | number;
        bottomLeft?: string | number;
        bottomRight?: string | number;
        topStart?: string | number;
        bottomStart?: string | number;
        topEnd?: string | number;
        bottomEnd?: string | number;
      };
  dropShadow?: number;
  cursor?: string;
  css?: Partial<CSSStyleDeclaration>;
};

Notes

• Use builder method calls for setting or binding individual style properties.
• Use UIElement.setStyle() to update appearance at runtime without bindings.

Type members

• type StyleOverrides.Offsets static
  A type that represents offset measurements for padding, margin, or border width.

Instance members

• width
  The outer width of the element, in pixels or as a string with unit.
• height
  The outer height of the element, in pixels or as a string with unit.
• minWidth
  The minimum width of the element, in pixels or as a string with unit.
• maxWidth
  The maximum width of the element, in pixels or as a string with unit.
• minHeight
  The minimum height of the element, in pixels or as a string with unit.
• maxHeight
  The maximum height of the element, in pixels or as a string with unit.
• flexGrow
  The flex growth factor.
• flexShrink
  The flex shrink factor.
• padding
  The padding within the element, in pixels, CSS string, or separate offset values.
• margin
  The margin around the element, in pixels, CSS string, or separate offset values.
• opacity
  The opacity level, from 0 (transparent) to 1 (opaque).
• textDirection
  The text direction, either “rtl” or “ltr”.
• textAlign
  The text alignment (CSS value).
• fontFamily
  The font family (CSS value).
• fontSize
  The font size, in pixels or as a string with unit.
• fontWeight
  The font weight (CSS value).
• letterSpacing
  The letter spacing, in pixels or as a string with unit.
• tabularNums
  True to use monospaced (tabular) numeric characters.
• lineHeight
  The line height relative to font size (CSS value, not in pixels).
• lineBreakMode
  The line break handling mode (CSS white-space value).
• bold
  True for bold text; overrides the fontWeight value.
• italic
  True for italic text.
• uppercase
  True for all-uppercase text.
• smallCaps
  True for text using small caps.
• underline
  True for underlined text.
• strikeThrough
  True for struck-through text.
• userTextSelect
  True if text can be selected by the user.
• background
  The background color or gradient.
• textColor
  The text color.
• borderColor
  The border color, or an object with separate colors per side.
• borderStyle
  The border style (CSS value); defaults to “solid”.
• borderWidth
  The border width, in pixels, CSS string, or separate offset values.
• borderRadius
  The border radius, in pixels, CSS string, or an object with separate values per corner.
• dropShadow
  The drop shadow blur distance in pixels; negative values create inset shadows.
• cursor
  The cursor style (CSS value).
• css
  Additional CSS style properties.