| 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.
new Style(ownerView: ViewBase | WeakRef<ViewBase>): Style;Defined in: ui/styling/style/index.ts
| Parameter | Type |
|---|---|
ownerView |
ViewBase | WeakRef<ViewBase> |
Style
accessibilityHidden
accessibilityHidden: boolean;Defined in: ui/styling/style/index.ts
accessibilityLanguage: string;Defined in: ui/styling/style/index.ts
accessibilityLiveRegion: AccessibilityLiveRegion;Defined in: ui/styling/style/index.ts
accessibilityMediaSession: boolean;Defined in: ui/styling/style/index.ts
accessibilityRole: AccessibilityRole;Defined in: ui/styling/style/index.ts
accessibilityState: AccessibilityState;Defined in: ui/styling/style/index.ts
accessibilityStep: number;Defined in: ui/styling/style/index.ts
accessible: boolean;Defined in: ui/styling/style/index.ts
alignContent: AlignContent;Defined in: ui/styling/style/index.ts
alignItems: AlignItems;Defined in: ui/styling/style/index.ts
alignSelf: AlignSelf;Defined in: ui/styling/style/index.ts
androidContentInset:
| string
| number
| LengthDipUnit
| LengthPxUnit;Defined in: ui/styling/style/index.ts
androidContentInsetLeft: LengthType;Defined in: ui/styling/style/index.ts
androidContentInsetRight: LengthType;Defined in: ui/styling/style/index.ts
androidDynamicElevationOffset: number;Defined in: ui/styling/style/index.ts
androidElevation: number;Defined in: ui/styling/style/index.ts
androidSelectedTabHighlightColor: Color;Defined in: ui/styling/style/index.ts
androidStatusBarBackground: Color;Defined in: ui/styling/style/index.ts
background: string;Defined in: ui/styling/style/index.ts
backgroundColor: Color;Defined in: ui/styling/style/index.ts
backgroundImage: string | LinearGradient;Defined in: ui/styling/style/index.ts
backgroundInternal: Background;Defined in: ui/styling/style/index.ts
backgroundPosition: string;Defined in: ui/styling/style/index.ts
backgroundRepeat: BackgroundRepeatType;Defined in: ui/styling/style/index.ts
backgroundSize: string;Defined in: ui/styling/style/index.ts
borderBottomColor: Color;Defined in: ui/styling/style/index.ts
borderBottomLeftRadius: LengthType;Defined in: ui/styling/style/index.ts
borderBottomRightRadius: LengthType;Defined in: ui/styling/style/index.ts
borderBottomWidth: LengthType;Defined in: ui/styling/style/index.ts
borderColor: string | Color;Defined in: ui/styling/style/index.ts
borderLeftColor: Color;Defined in: ui/styling/style/index.ts
borderLeftWidth: LengthType;Defined in: ui/styling/style/index.ts
borderRadius:
| string
| number
| LengthDipUnit
| LengthPxUnit;Defined in: ui/styling/style/index.ts
borderRightColor: Color;Defined in: ui/styling/style/index.ts
borderRightWidth: LengthType;Defined in: ui/styling/style/index.ts
borderTopColor: Color;Defined in: ui/styling/style/index.ts
borderTopLeftRadius: LengthType;Defined in: ui/styling/style/index.ts
borderTopRightRadius: LengthType;Defined in: ui/styling/style/index.ts
borderTopWidth: LengthType;Defined in: ui/styling/style/index.ts
borderWidth:
| string
| number
| LengthDipUnit
| LengthPxUnit;Defined in: ui/styling/style/index.ts
boxShadow: string | ShadowCSSValues[];Defined in: ui/styling/style/index.ts
clipPath: string | ClipPathFunction;Defined in: ui/styling/style/index.ts
color: Color;Defined in: ui/styling/style/index.ts
columnGap: LengthType;Defined in: ui/styling/style/index.ts
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: LayoutDirectionType;Defined in: ui/styling/style/index.ts
flex: Flex;Defined in: ui/styling/style/index.ts
flexDirection: FlexDirection;Defined in: ui/styling/style/index.ts
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: number;Defined in: ui/styling/style/index.ts
flexShrink: number;Defined in: ui/styling/style/index.ts
flexWrap: FlexWrap;Defined in: ui/styling/style/index.ts
flexWrapBefore: boolean;Defined in: ui/styling/style/index.ts
font: string;Defined in: ui/styling/style/index.ts
fontFamily: string;Defined in: ui/styling/style/index.ts
fontInternal: Font;Defined in: ui/styling/style/index.ts
fontScaleInternal: number;Defined in: ui/styling/style/index.ts
This property ensures inheritance of a11y scale among views.
fontSize: number;Defined in: ui/styling/style/index.ts
fontStyle: FontStyleType;Defined in: ui/styling/style/index.ts
fontVariationSettings: FontVariationSettingsType[];Defined in: ui/styling/style/index.ts
fontWeight: FontWeightType;Defined in: ui/styling/style/index.ts
gap:
| string
| number
| LengthDipUnit
| LengthPxUnit;Defined in: ui/styling/style/index.ts
height: PercentLengthType;Defined in: ui/styling/style/index.ts
horizontalAlignment: HorizontalAlignmentType;Defined in: ui/styling/style/index.ts
iconFontFamily: string;Defined in: ui/styling/style/index.ts
iosAccessibilityAdjustsFontSize: boolean;Defined in: ui/styling/style/index.ts
iosAccessibilityMaxFontScale: number;Defined in: ui/styling/style/index.ts
iosAccessibilityMinFontScale: number;Defined in: ui/styling/style/index.ts
justifyContent: JustifyContent;Defined in: ui/styling/style/index.ts
letterSpacing: number;Defined in: ui/styling/style/index.ts
lineHeight: number;Defined in: ui/styling/style/index.ts
margin:
| string
| number
| LengthDipUnit
| LengthPxUnit
| LengthPercentUnit;Defined in: ui/styling/style/index.ts
marginBottom: PercentLengthType;Defined in: ui/styling/style/index.ts
marginLeft: PercentLengthType;Defined in: ui/styling/style/index.ts
marginRight: PercentLengthType;Defined in: ui/styling/style/index.ts
marginTop: PercentLengthType;Defined in: ui/styling/style/index.ts
maxHeight: PercentLengthType;Defined in: ui/styling/style/index.ts
maxLines: number;Defined in: ui/styling/style/index.ts
maxWidth: PercentLengthType;Defined in: ui/styling/style/index.ts
minHeight: LengthType;Defined in: ui/styling/style/index.ts
minWidth: LengthType;Defined in: ui/styling/style/index.ts
opacity: number;Defined in: ui/styling/style/index.ts
order: number;Defined in: ui/styling/style/index.ts
padding:
| string
| number
| LengthDipUnit
| LengthPxUnit;Defined in: ui/styling/style/index.ts
paddingBottom: LengthType;Defined in: ui/styling/style/index.ts
paddingInternal: string;Defined in: ui/styling/style/index.ts
paddingLeft: LengthType;Defined in: ui/styling/style/index.ts
paddingRight: LengthType;Defined in: ui/styling/style/index.ts
paddingTop: LengthType;Defined in: ui/styling/style/index.ts
perspective: number;Defined in: ui/styling/style/index.ts
placeholderColor: Color;Defined in: ui/styling/style/index.ts
PropertyBag: {
(): {
[property: string]: string;
};
prototype: {
[property: string]: string;
};
};Defined in: ui/styling/style/index.ts
{
[property: string]: string;
}prototype: {
[property: string]: string;
};[property: string]: stringrotate: number;Defined in: ui/styling/style/index.ts
rotateX: number;Defined in: ui/styling/style/index.ts
rotateY: number;Defined in: ui/styling/style/index.ts
rowGap: LengthType;Defined in: ui/styling/style/index.ts
scaleX: number;Defined in: ui/styling/style/index.ts
scaleY: number;Defined in: ui/styling/style/index.ts
selectedBackgroundColor: Color;Defined in: ui/styling/style/index.ts
selectedTabTextColor: Color;Defined in: ui/styling/style/index.ts
selectedTextColor: Color;Defined in: ui/styling/style/index.ts
separatorColor: Color;Defined in: ui/styling/style/index.ts
statusBarStyle: "dark" | "light";Defined in: ui/styling/style/index.ts
tabBackgroundColor: Color;Defined in: ui/styling/style/index.ts
tabTextColor: Color;Defined in: ui/styling/style/index.ts
tabTextFontSize: number;Defined in: ui/styling/style/index.ts
textAlignment: TextAlignmentType;Defined in: ui/styling/style/index.ts
textDecoration: TextDecorationType;Defined in: ui/styling/style/index.ts
textOverflow: TextOverflowType;Defined in: ui/styling/style/index.ts
textShadow: ShadowCSSValues;Defined in: ui/styling/style/index.ts
textStroke: StrokeCSSValues;Defined in: ui/styling/style/index.ts
textTransform: TextTransformType;Defined in: ui/styling/style/index.ts
tintColor: Color;Defined in: ui/styling/style/index.ts
translateX: number;Defined in: ui/styling/style/index.ts
translateY: number;Defined in: ui/styling/style/index.ts
verticalAlignment: VerticalAlignmentType;Defined in: ui/styling/style/index.ts
viewRef: WeakRef<ViewBase>;Defined in: ui/styling/style/index.ts
visibility: VisibilityType;Defined in: ui/styling/style/index.ts
whiteSpace: WhiteSpaceType;Defined in: ui/styling/style/index.ts
width: PercentLengthType;Defined in: ui/styling/style/index.ts
zIndex: number;Defined in: ui/styling/style/index.ts
static propertyChangeEvent: string;Defined in: data/observable/index.ts
String value used when hooking to propertyChange event.
propertyChange
Observable.propertyChangeEvent
get view(): ViewBase;Defined in: ui/styling/style/index.ts
_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.
| Parameter | Type |
|---|---|
propertyName |
string |
value |
any |
oldValue? |
any |
Observable._createPropertyChangeData
_emit(eventName: string): void;Defined in: data/observable/index.ts
| Parameter | Type |
|---|---|
eventName |
string |
void
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.
| 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. |
void
get(name: string): any;Defined in: data/observable/index.ts
Gets the value of the specified property.
| Parameter | Type |
|---|---|
name |
string |
any
getCssVariable(varName: string): string;Defined in: ui/styling/style/index.ts
| Parameter | Type |
|---|---|
varName |
string |
string
hasListeners(eventName: string): boolean;Defined in: data/observable/index.ts
Checks whether a listener is registered for the specified event name.
| Parameter | Type | Description |
|---|---|---|
eventName |
string |
The name of the event to check for. |
boolean
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 Parameter |
|---|
T extends Optional<EventData, "object"> |
| 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. |
void
notifyPropertyChange(
name: string,
value: any,
oldValue?: any): void;Defined in: data/observable/index.ts
Notifies all the registered listeners for the property change event.
| Parameter | Type |
|---|---|
name |
string |
value |
any |
oldValue? |
any |
void
Observable.notifyPropertyChange
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.
| 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. |
void
on(
eventName: string,
callback: (data: EventData) => void,
thisArg?: any): void;Defined in: data/observable/index.ts
Adds a listener for the specified event name.
| 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. |
void
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.
| 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. |
void
removeEventListener(
eventName: string,
callback?: (data: EventData) => void,
thisArg?: any): void;Defined in: data/observable/index.ts
Removes listener(s) for the specified event name.
| 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. |
void
Observable.removeEventListener
removeScopedCssVariable(varName: string): void;Defined in: ui/styling/style/index.ts
| Parameter | Type |
|---|---|
varName |
string |
void
removeUnscopedCssVariable(varName: string): void;Defined in: ui/styling/style/index.ts
| Parameter | Type |
|---|---|
varName |
string |
void
resetScopedCssVariables(): void;Defined in: ui/styling/style/index.ts
void
resetUnscopedCssVariables(): void;Defined in: ui/styling/style/index.ts
void
set(name: string, value: any): void;Defined in: data/observable/index.ts
Updates the specified property with the provided value.
| Parameter | Type |
|---|---|
name |
string |
value |
any |
void
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.
| Parameter | Type |
|---|---|
name |
string |
value |
any |
void
setScopedCssVariable(varName: string, value: string): void;Defined in: ui/styling/style/index.ts
| Parameter | Type |
|---|---|
varName |
string |
value |
string |
void
setUnscopedCssVariable(varName: string, value: string): void;Defined in: ui/styling/style/index.ts
| Parameter | Type |
|---|---|
varName |
string |
value |
string |
void
toString(): string;Defined in: ui/styling/style/index.ts
Returns a string representation of an object.
string
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.
| Parameter | Type |
|---|---|
eventName |
string |
callback |
(data: EventData) => void |
thisArg? |
any |
once? |
boolean |
void
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.
| Parameter | Type |
|---|---|
eventName |
string |
callback? |
(data: EventData) => void |
thisArg? |
any |
void
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.
| Parameter | Type |
|---|---|
eventName |
string |
callback |
(data: EventData) => void |
thisArg? |
any |
once? |
boolean |
void
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.
| Parameter | Type |
|---|---|
eventName |
string |
callback |
(data: EventData) => void |
thisArg? |
any |
void
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.
| Parameter | Type |
|---|---|
eventName |
string |
callback? |
(data: EventData) => void |
thisArg? |
any |
void