Fix all property types

2025-11-05 13:26:48 +08:00 · 2017-01-04 10:20:33 +02:00
parent accc7643df
commit cce0a2d42f
12 changed files with 308 additions and 118 deletions
--- a/tns-core-modules/ui/core/properties.ts
+++ b/tns-core-modules/ui/core/properties.ts
@@ -44,11 +44,11 @@ export interface CoerciblePropertyOptions<T, U> extends PropertyOptions<T, U> {
    readonly coerceValue: (t: T, u: U) => U;
 }

-export interface ShorthandPropertyOptions {
+export interface ShorthandPropertyOptions<P> {
    name: string;
    cssName: string;
-    converter(this: void, value: string): [CssProperty<any, any>, any][];
-    getter(this: Style): string;
+    converter(this: void, value: string | P): [CssProperty<any, any>, any][];
+    getter(this: Style): string | P;
 }

 export interface CssPropertyOptions<T extends Style, U> extends PropertyOptions<T, U> {
@@ -684,7 +684,7 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
    }
 }

-export class ShorthandProperty<T extends Style> {
+export class ShorthandProperty<T extends Style, P> {
    private registered: boolean;

    public readonly key: symbol;
@@ -697,7 +697,7 @@ export class ShorthandProperty<T extends Style> {
    public readonly native: symbol;
    public readonly sourceKey: symbol;

-    constructor(options: ShorthandPropertyOptions) {
+    constructor(options: ShorthandPropertyOptions<P>) {
        const name = options.name;
        this.name = name;

@@ -712,7 +712,7 @@ export class ShorthandProperty<T extends Style> {

        const converter = options.converter;

-        function setLocalValue(this: T, value: string): void {
+        function setLocalValue(this: T, value: string| P): void {
            this[sourceKey] = ValueSource.Local;
            if (this[key] !== value) {
                this[key] = value;
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -219,10 +219,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
        this.style.borderLeftColor = value;
    }

-    get borderWidth(): string | number {
+    get borderWidth(): string | Length {
        return this.style.borderWidth;
    }
-    set borderWidth(value: string | number) {
+    set borderWidth(value: string | Length) {
        this.style.borderWidth = value;
    }

@@ -338,10 +338,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
        this.style.height = value;
    }

-    get margin(): string {
+    get margin(): string | PercentLength {
        return this.style.margin;
    }
-    set margin(value: string) {
+    set margin(value: string | PercentLength) {
        this.style.margin = value;
    }

@@ -1116,9 +1116,16 @@ widthProperty.register(Style);
 export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 heightProperty.register(Style);

-const marginProperty = new ShorthandProperty<Style>({
+const marginProperty = new ShorthandProperty<Style, string | PercentLength>({
    name: "margin", cssName: "margin",
-    getter: function (this: Style) { return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; },
+    getter: function (this: Style) { 
+        if (this.marginTop === this.marginRight && 
+            this.marginTop === this.marginBottom && 
+            this.marginTop === this.marginLeft) {
+                return this.marginTop;
+        }
+        return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; 
+    },
    converter: convertToMargins
 });
 marginProperty.register(Style);
@@ -1135,9 +1142,16 @@ marginTopProperty.register(Style);
 export const marginBottomProperty = new CssProperty<Style, PercentLength>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
 marginBottomProperty.register(Style);

-const paddingProperty = new ShorthandProperty<Style>({
+const paddingProperty = new ShorthandProperty<Style, string | Length>({
    name: "padding", cssName: "padding",
-    getter: function (this: Style) { return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; },
+    getter: function (this: Style) { 
+        if (this.paddingTop === this.paddingRight && 
+            this.paddingTop === this.paddingBottom &&
+            this.paddingTop === this.paddingLeft) {
+                return this.paddingTop;
+        }
+        return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; 
+    },
    converter: convertToPaddings
 });
 paddingProperty.register(Style);
@@ -1263,24 +1277,44 @@ function parseThickness(value: string): Thickness {
    }
 }

-function convertToMargins(this: void, value: string): [CssProperty<any, any>, any][] {
-    let thickness = parseThickness(value);
-    return [
-        [marginTopProperty, PercentLength.parse(thickness.top)],
-        [marginRightProperty, PercentLength.parse(thickness.right)],
-        [marginBottomProperty, PercentLength.parse(thickness.bottom)],
-        [marginLeftProperty, PercentLength.parse(thickness.left)]
-    ];
+function convertToMargins(this: void, value: string | PercentLength): [CssProperty<any, any>, any][] {
+    if (typeof value === "string" && value !== "auto"){
+        let thickness = parseThickness(value);
+        return [
+            [marginTopProperty, PercentLength.parse(thickness.top)],
+            [marginRightProperty, PercentLength.parse(thickness.right)],
+            [marginBottomProperty, PercentLength.parse(thickness.bottom)],
+            [marginLeftProperty, PercentLength.parse(thickness.left)]
+        ];
+    }
+    else {
+        return [
+            [marginTopProperty, value],
+            [marginRightProperty, value],
+            [marginBottomProperty, value],
+            [marginLeftProperty, value]
+        ];
+    }
 }

-function convertToPaddings(this: void, value: string): [CssProperty<any, any>, any][] {
-    let thickness = parseThickness(value);
-    return [
-        [paddingTopProperty, Length.parse(thickness.top)],
-        [paddingRightProperty, Length.parse(thickness.right)],
-        [paddingBottomProperty, Length.parse(thickness.bottom)],
-        [paddingLeftProperty, Length.parse(thickness.left)]
-    ];
+function convertToPaddings(this: void, value: string | Length): [CssProperty<any, any>, any][] {
+    if (typeof value === "string" && value !== "auto"){
+        let thickness = parseThickness(value);
+        return [
+            [paddingTopProperty, Length.parse(thickness.top)],
+            [paddingRightProperty, Length.parse(thickness.right)],
+            [paddingBottomProperty, Length.parse(thickness.bottom)],
+            [paddingLeftProperty, Length.parse(thickness.left)]
+        ];
+    }
+    else {
+        return [
+            [paddingTopProperty, value],
+            [paddingRightProperty, value],
+            [paddingBottomProperty, value],
+            [paddingLeftProperty, value]
+        ];
+    }
 }

 export const rotateProperty = new CssProperty<Style, number>({ name: "rotate", cssName: "rotate", defaultValue: 0, valueConverter: (v) => parseFloat(v) });
@@ -1298,7 +1332,7 @@ translateXProperty.register(Style);
 export const translateYProperty = new CssProperty<Style, number>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: (v) => parseFloat(v) });
 translateYProperty.register(Style);

-const transformProperty = new ShorthandProperty<Style>({
+const transformProperty = new ShorthandProperty<Style, string>({
    name: "transform", cssName: "transform",
    getter: function (this: Style) {
        let scaleX = this.scaleX;
@@ -1567,25 +1601,36 @@ function parseBorderColor(value: string): { top: Color, right: Color, bottom: Co
 }

 // Border Color properties.
-const borderColorProperty = new ShorthandProperty<Style>({
+const borderColorProperty = new ShorthandProperty<Style, string | Color>({
    name: "borderColor", cssName: "border-color",
    getter: function (this: Style) {
        if (Color.equals(this.borderTopColor, this.borderRightColor) &&
            Color.equals(this.borderTopColor, this.borderBottomColor) &&
            Color.equals(this.borderTopColor, this.borderLeftColor)) {
            return this.borderTopColor ? this.borderTopColor.toString() : "";
-        } else {
+        } 
+        else {
            return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
        }
    },
-    converter: function (value: string) {
-        let fourColors = parseBorderColor(value);
-        return [
-            [borderTopColorProperty, fourColors.top],
-            [borderRightColorProperty, fourColors.right],
-            [borderBottomColorProperty, fourColors.bottom],
-            [borderLeftColorProperty, fourColors.left]
-        ];
+    converter: function (value) {
+        if (typeof value === "string") {
+            let fourColors = parseBorderColor(value);
+            return [
+                [borderTopColorProperty, fourColors.top],
+                [borderRightColorProperty, fourColors.right],
+                [borderBottomColorProperty, fourColors.bottom],
+                [borderLeftColorProperty, fourColors.left]
+            ];
+        }
+        else {
+            return [
+                [borderTopColorProperty, value],
+                [borderRightColorProperty, value],
+                [borderBottomColorProperty, value],
+                [borderLeftColorProperty, value]
+            ];
+        }
    }
 })
 borderColorProperty.register(Style);
@@ -1623,25 +1668,36 @@ export const borderLeftColorProperty = new CssProperty<Style, Color>({
 borderLeftColorProperty.register(Style);

 // Border Width properties.
-const borderWidthProperty = new ShorthandProperty<Style>({
+const borderWidthProperty = new ShorthandProperty<Style, string | Length>({
    name: "borderWidth", cssName: "border-width",
    getter: function (this: Style) {
-        if (Color.equals(this.borderTopColor, this.borderRightColor) &&
-            Color.equals(this.borderTopColor, this.borderBottomColor) &&
-            Color.equals(this.borderTopColor, this.borderLeftColor)) {
-            return this.borderTopColor + "";
-        } else {
-            return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
+        if (this.borderTopWidth === this.borderRightWidth &&
+            this.borderTopWidth === this.borderBottomWidth &&
+            this.borderTopWidth === this.borderLeftWidth){
+                return this.borderTopWidth;
+        }
+        else {
+            return `${this.borderTopWidth} ${this.borderRightWidth} ${this.borderBottomWidth} ${this.borderLeftWidth}`;
        }
    },
-    converter: function (value: string) {
-        let borderWidths = parseThickness(value);
-        return [
-            [borderTopWidthProperty, borderWidths.top],
-            [borderRightWidthProperty, borderWidths.right],
-            [borderBottomWidthProperty, borderWidths.bottom],
-            [borderLeftWidthProperty, borderWidths.left]
-        ];
+    converter: function (value) {
+        if (typeof value === "string" && value !== "auto"){
+            let borderWidths = parseThickness(value);
+            return [
+                [borderTopWidthProperty, borderWidths.top],
+                [borderRightWidthProperty, borderWidths.right],
+                [borderBottomWidthProperty, borderWidths.bottom],
+                [borderLeftWidthProperty, borderWidths.left]
+            ];
+        }
+        else {
+            return [
+                [borderTopWidthProperty, value],
+                [borderRightWidthProperty, value],
+                [borderBottomWidthProperty, value],
+                [borderLeftWidthProperty, value]
+            ];
+        }
    }
 })
 borderWidthProperty.register(Style);
@@ -1711,7 +1767,7 @@ export const borderLeftWidthProperty = new CssProperty<Style, Length>({
 borderLeftWidthProperty.register(Style);

 // Border Radius properties.
-const borderRadiusProperty = new ShorthandProperty<Style>({
+const borderRadiusProperty = new ShorthandProperty<Style, number>({
    name: "borderRadius", cssName: "border-radius",
    getter: function (this: Style) {
        if (this.borderTopLeftRadius === this.borderTopRightRadius &&
@@ -1722,14 +1778,24 @@ const borderRadiusProperty = new ShorthandProperty<Style>({
            return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
        }
    },
-    converter: function (value: string) {
-        let borderRadius = parseThickness(value);
-        return [
-            [borderTopLeftRadiusProperty, borderRadius.top],
-            [borderTopRightRadiusProperty, borderRadius.right],
-            [borderBottomRightRadiusProperty, borderRadius.bottom],
-            [borderBottomLeftRadiusProperty, borderRadius.left]
-        ];
+    converter: function (value) {
+        if (typeof value === "string"){
+            let borderRadius = parseThickness(value);
+            return [
+                [borderTopLeftRadiusProperty, borderRadius.top],
+                [borderTopRightRadiusProperty, borderRadius.right],
+                [borderBottomRightRadiusProperty, borderRadius.bottom],
+                [borderBottomLeftRadiusProperty, borderRadius.left]
+            ];
+        }
+        else {
+            return [
+                [borderTopLeftRadiusProperty, value],
+                [borderTopRightRadiusProperty, value],
+                [borderBottomRightRadiusProperty, value],
+                [borderBottomLeftRadiusProperty, value]
+            ];
+        }
    }
 })
 borderRadiusProperty.register(Style);
@@ -1862,12 +1928,12 @@ export const fontWeightProperty = new InheritedCssProperty<Style, FontWeight>({
 });
 fontWeightProperty.register(Style);

-const fontProperty = new ShorthandProperty<Style>({
+const fontProperty = new ShorthandProperty<Style, string>({
    name: "font", cssName: "font",
    getter: function (this: Style) {
        return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`;
    },
-    converter: function (value: string) {
+    converter: function (value) {
        let font = parseFont(value);
        let fontSize = fontSizeConverter(font.fontSize);

--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -2,7 +2,7 @@ declare module "ui/core/view" {
    import { GestureTypes, GesturesObserver, GestureEventData, TouchGestureEventData, TouchAction } from "ui/gestures";
    import { Animation, AnimationDefinition, AnimationPromise } from "ui/animation";
    import {
-        ViewBase, Property, CssProperty, InheritedCssProperty, Style, EventData
+        ViewBase, Property, CssProperty, InheritedCssProperty, Style, EventData, ShorthandProperty
    } from "ui/core/view-base";
    import { Background } from "ui/styling/background";
    import { Font, FontWeight, FontStyle } from "ui/styling/font";
@@ -153,7 +153,7 @@ declare module "ui/core/view" {
        /**
         * Gets or sets the border width of the view.
         */
-        borderWidth: string | number;
+        borderWidth: string | Length;

        /**
         * Gets or sets the top border width of the view.
@@ -238,7 +238,7 @@ declare module "ui/core/view" {
        /**
         * Gets or sets margin style property.
         */
-        margin: string;
+        margin: string | PercentLength;

        /**
         * Specifies extra space on the left side of this view.
@@ -710,13 +710,13 @@ declare module "ui/core/view" {
    export const backgroundSizeProperty: CssProperty<Style, string>;
    export const backgroundPositionProperty: CssProperty<Style, string>;

-    export const borderColorProperty: CssProperty<Style, Color>;
+    export const borderColorProperty: ShorthandProperty<Style, string | Color>;
    export const borderTopColorProperty: CssProperty<Style, Color>;
    export const borderRightColorProperty: CssProperty<Style, Color>;
    export const borderBottomColorProperty: CssProperty<Style, Color>;
    export const borderLeftColorProperty: CssProperty<Style, Color>;

-    export const borderWidthProperty: CssProperty<Style, number>;
+    export const borderWidthProperty: ShorthandProperty<Style, string | Length>;
    export const borderTopWidthProperty: CssProperty<Style, Length>;
    export const borderRightWidthProperty: CssProperty<Style, Length>;
    export const borderBottomWidthProperty: CssProperty<Style, Length>;
@@ -736,13 +736,13 @@ declare module "ui/core/view" {
    export const minHeightProperty: CssProperty<Style, Length>;
    export const widthProperty: CssProperty<Style, Length>;
    export const heightProperty: CssProperty<Style, Length>;
-    export const marginProperty: CssProperty<Style, string>;
-    export const marginLeftProperty: CssProperty<Style, Length>;
-    export const marginRightProperty: CssProperty<Style, Length>;
-    export const marginTopProperty: CssProperty<Style, Length>;
-    export const marginBottomProperty: CssProperty<Style, Length>;
+    export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
+    export const marginLeftProperty: CssProperty<Style, PercentLength>;
+    export const marginRightProperty: CssProperty<Style, PercentLength>;
+    export const marginTopProperty: CssProperty<Style, PercentLength>;
+    export const marginBottomProperty: CssProperty<Style, PercentLength>;

-    export const paddingProperty: CssProperty<Style, string>;
+    export const paddingProperty: ShorthandProperty<Style, string | Length>;
    export const paddingLeftProperty: CssProperty<Style, Length>;
    export const paddingRightProperty: CssProperty<Style, Length>;
    export const paddingTopProperty: CssProperty<Style, Length>;
--- a/tns-core-modules/ui/definitions.d.ts
+++ b/tns-core-modules/ui/definitions.d.ts
@@ -204,15 +204,15 @@ declare module "ui/core/properties" {
        constructor(options: CssPropertyOptions<T, U>);
    }

-    export interface ShorthandPropertyOptions {
+    export interface ShorthandPropertyOptions<P> {
        readonly name: string,
        readonly cssName: string;
-        readonly converter: (value: string) => [CssProperty<any, any>, any][],
-        readonly getter: (this: Style) => string
+        readonly converter: (value: string | P) => [CssProperty<any, any>, any][],
+        readonly getter: (this: Style) => string | P
    }

-    export class ShorthandProperty<T extends Style> {
-        constructor(options: ShorthandPropertyOptions);
+    export class ShorthandProperty<T extends Style, P> {
+        constructor(options: ShorthandPropertyOptions<P>);

        public readonly native: symbol;
        public readonly name: string;
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
@@ -325,7 +325,7 @@ alignSelfProperty1.register(View);
 //     (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View");

 // flex-flow: <flex-direction> || <flex-wrap>
-const flexFlowProperty = new ShorthandProperty<Style>({
+const flexFlowProperty = new ShorthandProperty<Style, string>({
    name: "flex-flow", cssName: "flex-flow",
    getter: function (this: Style) {
        return `${this.flexDirection} ${this.flexWrap}`;
@@ -348,7 +348,7 @@ const flexFlowProperty = new ShorthandProperty<Style>({
 flexFlowProperty.register(Style);

 // flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
-const flexProperty = new ShorthandProperty<Style>({
+const flexProperty = new ShorthandProperty<Style, string>({
    name: "flex", cssName: "flex",
    getter: function (this: Style) {
        return `${this.flexGrow} ${this.flexShrink}`;
--- a/tns-core-modules/ui/layouts/layout-base-common.ts
+++ b/tns-core-modules/ui/layouts/layout-base-common.ts
@@ -1,5 +1,5 @@
 import { LayoutBase as LayoutBaseDefinition } from "ui/layouts/layout-base";
-import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById } from "ui/core/view";
+import { View, CustomLayoutView, Property, AddChildFromBuilder, getViewById, Length } from "ui/core/view";

 export * from "ui/core/view";

@@ -70,13 +70,41 @@ export class LayoutBaseCommon extends CustomLayoutView implements LayoutBaseDefi
        }
    }

-    get padding(): string {
+    get padding(): string | Length {
        return this.style.padding;
    }
-    set padding(value: string) {
+    set padding(value: string | Length) {
        this.style.padding = value;
    }

+    get paddingTop(): Length {
+        return this.style.paddingTop;
+    }
+    set paddingTop(value: Length) {
+        this.style.paddingTop = value;
+    }
+
+    get paddingRight(): Length {
+        return this.style.paddingRight;
+    }
+    set paddingRight(value: Length) {
+        this.style.paddingRight = value;
+    }
+
+    get paddingBottom(): Length {
+        return this.style.paddingBottom;
+    }
+    set paddingBottom(value: Length) {
+        this.style.paddingBottom = value;
+    }
+
+    get paddingLeft(): Length {
+        return this.style.paddingLeft;
+    }
+    set paddingLeft(value: Length) {
+        this.style.paddingLeft = value;
+    }
+
    public clipToBounds: boolean;

    public _childIndexToNativeChildIndex(index?: number): number {
--- a/tns-core-modules/ui/layouts/layout-base.d.ts
+++ b/tns-core-modules/ui/layouts/layout-base.d.ts
@@ -1,5 +1,5 @@
 declare module "ui/layouts/layout-base" {
-    import { View, CustomLayoutView, Property } from "ui/core/view";
+    import { View, CustomLayoutView, Property, Length } from "ui/core/view";

    export * from "ui/core/view";
    
@@ -64,30 +64,30 @@
         */
        eachLayoutChild(callback: (child: View, isLast: boolean) => void): void;

-        // /**
-        //  * Gets or sets padding style property.
-        //  */
-        // padding: string;
+        /**
+         * Gets or sets padding style property.
+         */
+        padding: string | Length;

-        // /**
-        //  * Specify the bottom padding of this layout.
-        //  */
-        // paddingBottom: number;
+        /**
+         * Specify the bottom padding of this layout.
+         */
+        paddingBottom: Length;

-        // /**
-        //  * Specify the left padding of this layout.
-        //  */
-        // paddingLeft: number;
+        /**
+         * Specify the left padding of this layout.
+         */
+        paddingLeft: Length;

-        // /**
-        //  * Specify the right padding of this layout.
-        //  */
-        // paddingRight: number;
+        /**
+         * Specify the right padding of this layout.
+         */
+        paddingRight: Length;

-        // /**
-        //  * Specify the top padding of this layout.
-        //  */
-        // paddingTop: number;
+        /**
+         * Specify the top padding of this layout.
+         */
+        paddingTop: Length;

        /**
         * Gets or sets a value indicating whether to clip the content of this layout.
--- a/tns-core-modules/ui/styling/style.d.ts
+++ b/tns-core-modules/ui/styling/style.d.ts
@@ -65,7 +65,7 @@ declare module "ui/styling/style" {
        public borderRightColor: Color;
        public borderBottomColor: Color;
        public borderLeftColor: Color;
-        public borderWidth: string | number;
+        public borderWidth: string | Length;
        public borderTopWidth: Length;
        public borderRightWidth: Length;
        public borderBottomWidth: Length;
@@ -96,12 +96,12 @@ declare module "ui/styling/style" {
        public minHeight: Length;
        public width: PercentLength;
        public height: PercentLength;
-        public margin: string;
+        public margin: string | PercentLength;
        public marginLeft: PercentLength;
        public marginTop: PercentLength;
        public marginRight: PercentLength;
        public marginBottom: PercentLength;
-        public padding: string;
+        public padding: string | Length;
        public paddingLeft: Length;
        public paddingTop: Length;
        public paddingRight: Length;
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -43,7 +43,7 @@ export class Style extends Observable implements StyleDefinition {
    public borderRightColor: Color;
    public borderBottomColor: Color;
    public borderLeftColor: Color;
-    public borderWidth: string | number;
+    public borderWidth: string | Length;
    public borderTopWidth: Length;
    public borderRightWidth: Length;
    public borderBottomWidth: Length;
@@ -74,12 +74,12 @@ export class Style extends Observable implements StyleDefinition {
    public minHeight: Length;
    public width: PercentLength;
    public height: PercentLength;
-    public margin: string;
+    public margin: string | PercentLength;
    public marginLeft: PercentLength;
    public marginTop: PercentLength;
    public marginRight: PercentLength;
    public marginBottom: PercentLength;
-    public padding: string;
+    public padding: string | Length;
    public paddingLeft: Length;
    public paddingTop: Length;
    public paddingRight: Length;
--- a/tns-core-modules/ui/text-base/text-base-common.ts
+++ b/tns-core-modules/ui/text-base/text-base-common.ts
@@ -1,5 +1,5 @@
 import { TextBase as TextBaseDefinition } from "ui/text-base";
-import { View, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser } from "ui/core/view";
+import { View, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser, Length } from "ui/core/view";
 import { PropertyChangeData } from "data/observable";
 import { FormattedString, FormattedStringView } from "text/formatted-string";
 import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener";
@@ -56,6 +56,41 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition,
        this.style.whiteSpace = value;
    }

+    get padding(): string | Length {
+        return this.style.padding;
+    }
+    set padding(value: string | Length) {
+        this.style.padding = value;
+    }
+
+    get paddingTop(): Length {
+        return this.style.paddingTop;
+    }
+    set paddingTop(value: Length) {
+        this.style.paddingTop = value;
+    }
+
+    get paddingRight(): Length {
+        return this.style.paddingRight;
+    }
+    set paddingRight(value: Length) {
+        this.style.paddingRight = value;
+    }
+
+    get paddingBottom(): Length {
+        return this.style.paddingBottom;
+    }
+    set paddingBottom(value: Length) {
+        this.style.paddingBottom = value;
+    }
+
+    get paddingLeft(): Length {
+        return this.style.paddingLeft;
+    }
+    set paddingLeft(value: Length) {
+        this.style.paddingLeft = value;
+    }
+
    public onFormattedTextChanged(data: PropertyChangeData) {
        let value = data.value;
        this._setFormattedTextPropertyToNative(value);
--- a/tns-core-modules/ui/text-base/text-base.d.ts
+++ b/tns-core-modules/ui/text-base/text-base.d.ts
@@ -1,5 +1,5 @@
 declare module "ui/text-base" {
-    import { View, AddChildFromBuilder, Property, CssProperty, InheritedCssProperty, Style } from "ui/core/view";
+    import { View, AddChildFromBuilder, Property, CssProperty, InheritedCssProperty, Style, Length } from "ui/core/view";
    import { FormattedString, FormattedStringView } from "text/formatted-string";

    export * from "ui/core/view";
@@ -49,6 +49,31 @@
         */
        whiteSpace: WhiteSpace;

+        /**
+         * Gets or sets padding style property.
+         */
+        padding: string | Length;
+
+        /**
+         * Specify the bottom padding of this layout.
+         */
+        paddingBottom: Length;
+
+        /**
+         * Specify the left padding of this layout.
+         */
+        paddingLeft: Length;
+
+        /**
+         * Specify the right padding of this layout.
+         */
+        paddingRight: Length;
+
+        /**
+         * Specify the top padding of this layout.
+         */
+        paddingTop: Length;
+
        /**
         * Called for every child element declared in xml.
         * This method will add a child element (value) to current element.
--- a/tns-core-modules/ui/text-field/text-field.ios.ts
+++ b/tns-core-modules/ui/text-field/text-field.ios.ts
@@ -1,7 +1,15 @@
-import { TextFieldBase, Color, secureProperty, textProperty, hintProperty, colorProperty, placeholderColorProperty } from "./text-field-common";
+import { 
+    TextFieldBase, Color, secureProperty, textProperty, hintProperty, colorProperty, placeholderColorProperty, 
+    Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty
+} from "./text-field-common";

 export * from "./text-field-common";

+const zeroLength: Length = {
+    value: 0,
+    unit: "px"
+};
+
 class UITextFieldDelegateImpl extends NSObject implements UITextFieldDelegate {
    public static ObjCProtocols = [UITextFieldDelegate];

@@ -182,4 +190,32 @@ export class TextField extends TextFieldBase {
        colorAttibutes.setValueForKey(value instanceof Color ? value.ios : value, NSForegroundColorAttributeName);
        nativeView.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(nativeView.placeholder || "", colorAttibutes);
    }
+
+    get [paddingTopProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingTopProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
+
+    get [paddingRightProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingRightProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
+
+    get [paddingBottomProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingBottomProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
+
+    get [paddingLeftProperty.native](): Length {
+        return zeroLength;
+    }
+    set [paddingLeftProperty.native](value: Length) {
+        // Padding is realized via UITextFieldImpl.textRectForBounds method
+    }
 }