Skip to content

Latest commit

Β 

History

History
2062 lines (1277 loc) Β· 42.3 KB

Style.md

File metadata and controls

2062 lines (1277 loc) Β· 42.3 KB
title Style
titleTemplate title - API / NativeScript
description Observable is used when you want to be notified when a change occurs. Use on/off methods to add/remove listener. Please note that should you be using the `ne...
contributors false

Defined in: ui/styling/style/index.ts

Observable is used when you want to be notified when a change occurs. Use on/off methods to add/remove listener. Please note that should you be using the new Observable({}) constructor, it is obsolete since v3.0, and you have to migrate to the "data/observable" fromObject({}) or the fromObjectRecursive({}) functions.

Extends

Constructors

Constructor

new Style(ownerView: ViewBase | WeakRef<ViewBase>): Style;

Defined in: ui/styling/style/index.ts

Parameters

Parameter Type
ownerView ViewBase | WeakRef<ViewBase>

Returns

Style

Overrides

Observable.constructor

Properties

accessibilityHidden

accessibilityHidden: boolean;

Defined in: ui/styling/style/index.ts


accessibilityLanguage

accessibilityLanguage: string;

Defined in: ui/styling/style/index.ts


accessibilityLiveRegion

accessibilityLiveRegion: AccessibilityLiveRegion;

Defined in: ui/styling/style/index.ts


accessibilityMediaSession

accessibilityMediaSession: boolean;

Defined in: ui/styling/style/index.ts


accessibilityRole

accessibilityRole: AccessibilityRole;

Defined in: ui/styling/style/index.ts


accessibilityState

accessibilityState: AccessibilityState;

Defined in: ui/styling/style/index.ts


accessibilityStep

accessibilityStep: number;

Defined in: ui/styling/style/index.ts


accessible

accessible: boolean;

Defined in: ui/styling/style/index.ts


alignContent

alignContent: AlignContent;

Defined in: ui/styling/style/index.ts


alignItems

alignItems: AlignItems;

Defined in: ui/styling/style/index.ts


alignSelf

alignSelf: AlignSelf;

Defined in: ui/styling/style/index.ts


androidContentInset

androidContentInset: 
  | string
  | number
  | LengthDipUnit
  | LengthPxUnit;

Defined in: ui/styling/style/index.ts


androidContentInsetLeft

androidContentInsetLeft: LengthType;

Defined in: ui/styling/style/index.ts


androidContentInsetRight

androidContentInsetRight: LengthType;

Defined in: ui/styling/style/index.ts


androidDynamicElevationOffset

androidDynamicElevationOffset: number;

Defined in: ui/styling/style/index.ts


androidElevation

androidElevation: number;

Defined in: ui/styling/style/index.ts


androidSelectedTabHighlightColor

androidSelectedTabHighlightColor: Color;

Defined in: ui/styling/style/index.ts


androidStatusBarBackground

androidStatusBarBackground: Color;

Defined in: ui/styling/style/index.ts


background

background: string;

Defined in: ui/styling/style/index.ts


backgroundColor

backgroundColor: Color;

Defined in: ui/styling/style/index.ts


backgroundImage

backgroundImage: string | LinearGradient;

Defined in: ui/styling/style/index.ts


backgroundInternal

backgroundInternal: Background;

Defined in: ui/styling/style/index.ts


backgroundPosition

backgroundPosition: string;

Defined in: ui/styling/style/index.ts


backgroundRepeat

backgroundRepeat: BackgroundRepeatType;

Defined in: ui/styling/style/index.ts


backgroundSize

backgroundSize: string;

Defined in: ui/styling/style/index.ts


borderBottomColor

borderBottomColor: Color;

Defined in: ui/styling/style/index.ts


borderBottomLeftRadius

borderBottomLeftRadius: LengthType;

Defined in: ui/styling/style/index.ts


borderBottomRightRadius

borderBottomRightRadius: LengthType;

Defined in: ui/styling/style/index.ts


borderBottomWidth

borderBottomWidth: LengthType;

Defined in: ui/styling/style/index.ts


borderColor

borderColor: string | Color;

Defined in: ui/styling/style/index.ts


borderLeftColor

borderLeftColor: Color;

Defined in: ui/styling/style/index.ts


borderLeftWidth

borderLeftWidth: LengthType;

Defined in: ui/styling/style/index.ts


borderRadius

borderRadius: 
  | string
  | number
  | LengthDipUnit
  | LengthPxUnit;

Defined in: ui/styling/style/index.ts


borderRightColor

borderRightColor: Color;

Defined in: ui/styling/style/index.ts


borderRightWidth

borderRightWidth: LengthType;

Defined in: ui/styling/style/index.ts


borderTopColor

borderTopColor: Color;

Defined in: ui/styling/style/index.ts


borderTopLeftRadius

borderTopLeftRadius: LengthType;

Defined in: ui/styling/style/index.ts


borderTopRightRadius

borderTopRightRadius: LengthType;

Defined in: ui/styling/style/index.ts


borderTopWidth

borderTopWidth: LengthType;

Defined in: ui/styling/style/index.ts


borderWidth

borderWidth: 
  | string
  | number
  | LengthDipUnit
  | LengthPxUnit;

Defined in: ui/styling/style/index.ts


boxShadow

boxShadow: string | ShadowCSSValues[];

Defined in: ui/styling/style/index.ts


clipPath

clipPath: string | ClipPathFunction;

Defined in: ui/styling/style/index.ts


color

color: Color;

Defined in: ui/styling/style/index.ts


columnGap

columnGap: LengthType;

Defined in: ui/styling/style/index.ts


cornerShape

cornerShape: CornerShapeType;

Defined in: ui/styling/style/index.ts

The curve used to round the corners: 'round' (circular arcs, the default) or 'squircle' (Apple's continuous corner curve). iOS only; Android always renders circular corners.


direction

direction: LayoutDirectionType;

Defined in: ui/styling/style/index.ts


flex

flex: Flex;

Defined in: ui/styling/style/index.ts


flexDirection

flexDirection: FlexDirection;

Defined in: ui/styling/style/index.ts


flexFlow

flexFlow: 
  | "row nowrap"
  | "row wrap"
  | "row wrap-reverse"
  | "row-reverse nowrap"
  | "row-reverse wrap"
  | "row-reverse wrap-reverse"
  | "column nowrap"
  | "column wrap"
  | "column wrap-reverse"
  | "column-reverse nowrap"
  | "column-reverse wrap"
  | "column-reverse wrap-reverse";

Defined in: ui/styling/style/index.ts


flexGrow

flexGrow: number;

Defined in: ui/styling/style/index.ts


flexShrink

flexShrink: number;

Defined in: ui/styling/style/index.ts


flexWrap

flexWrap: FlexWrap;

Defined in: ui/styling/style/index.ts


flexWrapBefore

flexWrapBefore: boolean;

Defined in: ui/styling/style/index.ts


font

font: string;

Defined in: ui/styling/style/index.ts


fontFamily

fontFamily: string;

Defined in: ui/styling/style/index.ts


fontInternal

fontInternal: Font;

Defined in: ui/styling/style/index.ts


fontScaleInternal

fontScaleInternal: number;

Defined in: ui/styling/style/index.ts

This property ensures inheritance of a11y scale among views.


fontSize

fontSize: number;

Defined in: ui/styling/style/index.ts


fontStyle

fontStyle: FontStyleType;

Defined in: ui/styling/style/index.ts


fontVariationSettings

fontVariationSettings: FontVariationSettingsType[];

Defined in: ui/styling/style/index.ts


fontWeight

fontWeight: FontWeightType;

Defined in: ui/styling/style/index.ts


gap

gap: 
  | string
  | number
  | LengthDipUnit
  | LengthPxUnit;

Defined in: ui/styling/style/index.ts


height

height: PercentLengthType;

Defined in: ui/styling/style/index.ts


horizontalAlignment

horizontalAlignment: HorizontalAlignmentType;

Defined in: ui/styling/style/index.ts


iconFontFamily

iconFontFamily: string;

Defined in: ui/styling/style/index.ts


iosAccessibilityAdjustsFontSize

iosAccessibilityAdjustsFontSize: boolean;

Defined in: ui/styling/style/index.ts


iosAccessibilityMaxFontScale

iosAccessibilityMaxFontScale: number;

Defined in: ui/styling/style/index.ts


iosAccessibilityMinFontScale

iosAccessibilityMinFontScale: number;

Defined in: ui/styling/style/index.ts


justifyContent

justifyContent: JustifyContent;

Defined in: ui/styling/style/index.ts


letterSpacing

letterSpacing: number;

Defined in: ui/styling/style/index.ts


lineHeight

lineHeight: number;

Defined in: ui/styling/style/index.ts


margin

margin: 
  | string
  | number
  | LengthDipUnit
  | LengthPxUnit
  | LengthPercentUnit;

Defined in: ui/styling/style/index.ts


marginBottom

marginBottom: PercentLengthType;

Defined in: ui/styling/style/index.ts


marginLeft

marginLeft: PercentLengthType;

Defined in: ui/styling/style/index.ts


marginRight

marginRight: PercentLengthType;

Defined in: ui/styling/style/index.ts


marginTop

marginTop: PercentLengthType;

Defined in: ui/styling/style/index.ts


maxHeight

maxHeight: PercentLengthType;

Defined in: ui/styling/style/index.ts


maxLines

maxLines: number;

Defined in: ui/styling/style/index.ts


maxWidth

maxWidth: PercentLengthType;

Defined in: ui/styling/style/index.ts


minHeight

minHeight: LengthType;

Defined in: ui/styling/style/index.ts


minWidth

minWidth: LengthType;

Defined in: ui/styling/style/index.ts


opacity

opacity: number;

Defined in: ui/styling/style/index.ts


order

order: number;

Defined in: ui/styling/style/index.ts


padding

padding: 
  | string
  | number
  | LengthDipUnit
  | LengthPxUnit;

Defined in: ui/styling/style/index.ts


paddingBottom

paddingBottom: LengthType;

Defined in: ui/styling/style/index.ts


paddingInternal

paddingInternal: string;

Defined in: ui/styling/style/index.ts


paddingLeft

paddingLeft: LengthType;

Defined in: ui/styling/style/index.ts


paddingRight

paddingRight: LengthType;

Defined in: ui/styling/style/index.ts


paddingTop

paddingTop: LengthType;

Defined in: ui/styling/style/index.ts


perspective

perspective: number;

Defined in: ui/styling/style/index.ts


placeholderColor

placeholderColor: Color;

Defined in: ui/styling/style/index.ts


PropertyBag

PropertyBag: {
(): {
[property: string]: string;
};
  prototype: {
   [property: string]: string;
  };
};

Defined in: ui/styling/style/index.ts

Returns

{
[property: string]: string;
}

prototype

prototype: {
[property: string]: string;
};
Index Signature
[property: string]: string

rotate

rotate: number;

Defined in: ui/styling/style/index.ts


rotateX

rotateX: number;

Defined in: ui/styling/style/index.ts


rotateY

rotateY: number;

Defined in: ui/styling/style/index.ts


rowGap

rowGap: LengthType;

Defined in: ui/styling/style/index.ts


scaleX

scaleX: number;

Defined in: ui/styling/style/index.ts


scaleY

scaleY: number;

Defined in: ui/styling/style/index.ts


selectedBackgroundColor

selectedBackgroundColor: Color;

Defined in: ui/styling/style/index.ts


selectedTabTextColor

selectedTabTextColor: Color;

Defined in: ui/styling/style/index.ts


selectedTextColor

selectedTextColor: Color;

Defined in: ui/styling/style/index.ts


separatorColor

separatorColor: Color;

Defined in: ui/styling/style/index.ts


statusBarStyle

statusBarStyle: "dark" | "light";

Defined in: ui/styling/style/index.ts


tabBackgroundColor

tabBackgroundColor: Color;

Defined in: ui/styling/style/index.ts


tabTextColor

tabTextColor: Color;

Defined in: ui/styling/style/index.ts


tabTextFontSize

tabTextFontSize: number;

Defined in: ui/styling/style/index.ts


textAlignment

textAlignment: TextAlignmentType;

Defined in: ui/styling/style/index.ts


textDecoration

textDecoration: TextDecorationType;

Defined in: ui/styling/style/index.ts


textOverflow

textOverflow: TextOverflowType;

Defined in: ui/styling/style/index.ts


textShadow

textShadow: ShadowCSSValues;

Defined in: ui/styling/style/index.ts


textStroke

textStroke: StrokeCSSValues;

Defined in: ui/styling/style/index.ts


textTransform

textTransform: TextTransformType;

Defined in: ui/styling/style/index.ts


tintColor

tintColor: Color;

Defined in: ui/styling/style/index.ts


translateX

translateX: number;

Defined in: ui/styling/style/index.ts


translateY

translateY: number;

Defined in: ui/styling/style/index.ts


verticalAlignment

verticalAlignment: VerticalAlignmentType;

Defined in: ui/styling/style/index.ts


viewRef

viewRef: WeakRef<ViewBase>;

Defined in: ui/styling/style/index.ts


visibility

visibility: VisibilityType;

Defined in: ui/styling/style/index.ts


whiteSpace

whiteSpace: WhiteSpaceType;

Defined in: ui/styling/style/index.ts


width

width: PercentLengthType;

Defined in: ui/styling/style/index.ts


zIndex

zIndex: number;

Defined in: ui/styling/style/index.ts


propertyChangeEvent

static propertyChangeEvent: string;

Defined in: data/observable/index.ts

String value used when hooking to propertyChange event.

Ns Event

propertyChange

Inherited from

Observable.propertyChangeEvent

Accessors

view

Get Signature

get view(): ViewBase;

Defined in: ui/styling/style/index.ts

Returns

ViewBase

Methods

_createPropertyChangeData()

_createPropertyChangeData(
   propertyName: string, 
   value: any, 
   oldValue?: any): PropertyChangeData;

Defined in: data/observable/index.ts

This method is intended to be overriden by inheritors to provide additional implementation.

Parameters

Parameter Type
propertyName string
value any
oldValue? any

Returns

PropertyChangeData

Inherited from

Observable._createPropertyChangeData


_emit()

_emit(eventName: string): void;

Defined in: data/observable/index.ts

Parameters

Parameter Type
eventName string

Returns

void

Inherited from

Observable._emit


addEventListener()

addEventListener(
   eventName: string, 
   callback: (data: EventData) => void, 
   thisArg?: any, 
   once?: boolean): void;

Defined in: data/observable/index.ts

Adds a listener for the specified event name.

Parameters

Parameter Type Description
eventName string Name of the event to attach to.
callback (data: EventData) => void A function to be called when some of the specified event(s) is raised.
thisArg? any An optional parameter which when set will be used as "this" in callback method call.
once? boolean An optional parameter which when set will cause the event listener to fire once.

Returns

void

Inherited from

Observable.addEventListener


get()

get(name: string): any;

Defined in: data/observable/index.ts

Gets the value of the specified property.

Parameters

Parameter Type
name string

Returns

any

Inherited from

Observable.get


getCssVariable()

getCssVariable(varName: string): string;

Defined in: ui/styling/style/index.ts

Parameters

Parameter Type
varName string

Returns

string


hasListeners()

hasListeners(eventName: string): boolean;

Defined in: data/observable/index.ts

Checks whether a listener is registered for the specified event name.

Parameters

Parameter Type Description
eventName string The name of the event to check for.

Returns

boolean

Inherited from

Observable.hasListeners


notify()

notify<T>(data: T): void;

Defined in: data/observable/index.ts

Notify this Observable instance with some data. This causes all event handlers on the Observable instance to be called, as well as any 'global' event handlers set on the instance's class.

Type Parameters

Type Parameter
T extends Optional<EventData, "object">

Parameters

Parameter Type Description
data T an object that satisfies the EventData interface, though with an optional 'object' property. If left undefined, the 'object' property will implicitly be set as this Observable instance.

Returns

void

Inherited from

Observable.notify


notifyPropertyChange()

notifyPropertyChange(
   name: string, 
   value: any, 
   oldValue?: any): void;

Defined in: data/observable/index.ts

Notifies all the registered listeners for the property change event.

Parameters

Parameter Type
name string
value any
oldValue? any

Returns

void

Inherited from

Observable.notifyPropertyChange


off()

off(
   eventName: string, 
   callback?: (data: EventData) => void, 
   thisArg?: any): void;

Defined in: data/observable/index.ts

Removes the listener(s) for the specified event name.

Parameters

Parameter Type Description
eventName string The name of the event.
callback? (data: EventData) => void An optional specific event listener to remove (if omitted, all event listeners by this name will be removed).
thisArg? any An optional parameter which, when set, will be used to refine search of the correct event listener to be removed.

Returns

void

Inherited from

Observable.off


on()

on(
   eventName: string, 
   callback: (data: EventData) => void, 
   thisArg?: any): void;

Defined in: data/observable/index.ts

Adds a listener for the specified event name.

Parameters

Parameter Type Description
eventName string The name of the event.
callback (data: EventData) => void The event listener to add. Will be called when an event of the given name is raised.
thisArg? any An optional parameter which, when set, will be bound as the this context when the callback is called. Falsy values will be not be bound.

Returns

void

Inherited from

Observable.on


once()

once(
   eventName: string, 
   callback: (data: EventData) => void, 
   thisArg?: any): void;

Defined in: data/observable/index.ts

Adds a listener for the specified event name, which, once fired, will remove itself.

Parameters

Parameter Type Description
eventName string The name of the event.
callback (data: EventData) => void The event listener to add. Will be called when an event of the given name is raised.
thisArg? any An optional parameter which, when set, will be bound as the this context when the callback is called. Falsy values will be not be bound.

Returns

void

Inherited from

Observable.once


removeEventListener()

removeEventListener(
   eventName: string, 
   callback?: (data: EventData) => void, 
   thisArg?: any): void;

Defined in: data/observable/index.ts

Removes listener(s) for the specified event name.

Parameters

Parameter Type Description
eventName string Name of the event to attach to.
callback? (data: EventData) => void An optional parameter pointing to a specific listener. If not defined, all listeners for the event names will be removed.
thisArg? any An optional parameter which when set will be used to refine search of the correct callback which will be removed as event listener.

Returns

void

Inherited from

Observable.removeEventListener


removeScopedCssVariable()

removeScopedCssVariable(varName: string): void;

Defined in: ui/styling/style/index.ts

Parameters

Parameter Type
varName string

Returns

void


removeUnscopedCssVariable()

removeUnscopedCssVariable(varName: string): void;

Defined in: ui/styling/style/index.ts

Parameters

Parameter Type
varName string

Returns

void


resetScopedCssVariables()

resetScopedCssVariables(): void;

Defined in: ui/styling/style/index.ts

Returns

void


resetUnscopedCssVariables()

resetUnscopedCssVariables(): void;

Defined in: ui/styling/style/index.ts

Returns

void


set()

set(name: string, value: any): void;

Defined in: data/observable/index.ts

Updates the specified property with the provided value.

Parameters

Parameter Type
name string
value any

Returns

void

Inherited from

Observable.set


setProperty()

setProperty(name: string, value: any): void;

Defined in: data/observable/index.ts

Updates the specified property with the provided value and raises a property change event and a specific change event based on the property name.

Parameters

Parameter Type
name string
value any

Returns

void

Inherited from

Observable.setProperty


setScopedCssVariable()

setScopedCssVariable(varName: string, value: string): void;

Defined in: ui/styling/style/index.ts

Parameters

Parameter Type
varName string
value string

Returns

void


setUnscopedCssVariable()

setUnscopedCssVariable(varName: string, value: string): void;

Defined in: ui/styling/style/index.ts

Parameters

Parameter Type
varName string
value string

Returns

void


toString()

toString(): string;

Defined in: ui/styling/style/index.ts

Returns a string representation of an object.

Returns

string


addEventListener()

static addEventListener(
   eventName: string, 
   callback: (data: EventData) => void, 
   thisArg?: any, 
   once?: boolean): void;

Defined in: data/observable/index.ts

Please avoid using the static event-handling APIs as they will be removed in future.

Parameters

Parameter Type
eventName string
callback (data: EventData) => void
thisArg? any
once? boolean

Returns

void

Deprecated

Inherited from

Observable.addEventListener


off()

static off(
   eventName: string, 
   callback?: (data: EventData) => void, 
   thisArg?: any): void;

Defined in: data/observable/index.ts

Please avoid using the static event-handling APIs as they will be removed in future.

Parameters

Parameter Type
eventName string
callback? (data: EventData) => void
thisArg? any

Returns

void

Deprecated

Inherited from

Observable.off


on()

static on(
   eventName: string, 
   callback: (data: EventData) => void, 
   thisArg?: any, 
   once?: boolean): void;

Defined in: data/observable/index.ts

Please avoid using the static event-handling APIs as they will be removed in future.

Parameters

Parameter Type
eventName string
callback (data: EventData) => void
thisArg? any
once? boolean

Returns

void

Deprecated

Inherited from

Observable.on


once()

static once(
   eventName: string, 
   callback: (data: EventData) => void, 
   thisArg?: any): void;

Defined in: data/observable/index.ts

Please avoid using the static event-handling APIs as they will be removed in future.

Parameters

Parameter Type
eventName string
callback (data: EventData) => void
thisArg? any

Returns

void

Deprecated

Inherited from

Observable.once


removeEventListener()

static removeEventListener(
   eventName: string, 
   callback?: (data: EventData) => void, 
   thisArg?: any): void;

Defined in: data/observable/index.ts

Please avoid using the static event-handling APIs as they will be removed in future.

Parameters

Parameter Type
eventName string
callback? (data: EventData) => void
thisArg? any

Returns

void

Deprecated

Inherited from

Observable.removeEventListener