📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Styling

In the following article, we are demostrating different scenarios for setting CSS styles via classes, selectors, IDs and use cases for setting CSS via code-behind files.

Basics

The following example demonstrates, how to set up CSS class, id and state selector while using component behind via code-behind.

/* Using component Class name (e.g. stlye will be applied on all Buttons) */
Button { 
    background-color: red; 
} 

/* Using CSS class */
.testClass { 
    color: blue; 
} 

/* Using ID */
#myButton { 
    color: yellow; 
} 

/* Using pseudo-selector :pressed */
.testClass:pressed { 
    color: green; 
}
function onPageLoaded(args) {
    const page = args.object;

    page.css = "Button { background-color: red; color: white; } .testClass { color: blue; } #myButton { color: yellow; } .testClass:pressed { color: green; }";

    // Using the globaly defined style e.g. Button { background-color: red; }
    const btn = new Button();
    btn.text = "Sample button";

    // Atttaching CSS class to a component
    const btnWithClass = new Button();
    btnWithClass.text = "Button with class";
    btnWithClass.className = "testClass";

    // Using component's ID to apply CSS styling
    const btnStyledViaID = new Button();
    btnStyledViaID.text = "Button with ID";
    btnStyledViaID.id = "myButton";
}
export function onPageLoaded(args) {
    const page: Page = <Page>args.object;

    page.css = "Button { background-color: red; color: white; } .testClass { color: blue; } #myButton { color: yellow; } .testClass:pressed { color: green; }";

    // Using the globaly defined style e.g. Button { background-color: red; }
    const btn = new Button();
    btn.text = "Sample button";

    // Atttaching CSS class to a component
    const btnWithClass = new Button();
    btnWithClass.text = "Button with class";
    btnWithClass.className = "testClass";

    // Using component's ID to apply CSS styling
    const btnStyledViaID = new Button();
    btnStyledViaID.text = "Button with ID";
    btnStyledViaID.id = "myButton";
}
 <!-- Using nativescript-theme plugin predefined CSS classes -->
 <!-- More at https://docs.nativescript.org/ui/theme -->
<Label text="Sample label" class="h2 text-left m-16" textWrap="true" />

Improve this document

Demo Source


Border Basics

CSS Property JavaScript Property Description
border-color borderColor Sets a border color to the matched view’s. Accepts hex color value or Color instance.
border-width borderWidth Sets a border width to the matched view’s. Accepts number value as a DIP (Device independent pixels).
border-radius borderRadius Sets a border radius to the matched view’s. Accepts number value as a DIP (Device independent pixels).

Setting border properties thought CSS class.

.border-props {
    border-width: 3;
    border-color: orangered;
    border-radius: 20;
}

Improve this document

Demo Source


Border Code Behind

Borders can be set dynamically via code-behind implementation.

label.borderWidth = 2;
label.borderColor = new Color("orangered");
label.borderRadius = 10;
label.borderWidth = 2;
label.borderColor = new Color("orangered");
label.borderRadius = 10;

Improve this document

Demo Source


Border Radius

The border-radius property allows us to create rounded corners for NativeScript elements. This property can have from one, two or four values.

Rules about applying border-radius values:

  • Four values - border-radius: 15 50 30 5; First value applies to the top-left corner, second value applies to the top-right corner, third value applies to bottom-right corner, and fourth value applies to the bottom-left corner.

  • Two values - border-radius: 5 10; First value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners.

  • One value - border-radius: 10; The value applies to all four corners, which are rounded equally.

.no-top-left {
    border-radius: 0 20 20 20;
}

.no-top-left-right {
    border-radius: 0 0 20 20;
}

.no-bottom-left {
    border-radius: 20 20 20 0;
}

.no-bottom-left-right {
    border-radius: 20 20 0 0;
}

.radius-all-corners {
    border-radius: 20;
}

.no-radius-at-all {
    border-radius: 0;
}

.diagonal {
    border-radius: 20 0;
}

.reverse-diagonal {
    border-radius: 0 20;
}

Improve this document

Demo Source


Gradients

NativeScript supports creating linear gradients via the property linear-gradient which can be applied to CSS properties background-image and background.

/* Setting linear gradients */

Label {
    padding: 8;
    color:white;
}

.bottom-gradient {
    background: linear-gradient(to bottom, orangered, green, lightblue);
}

.left-gradient {
    background: linear-gradient(to left, orangered, green, lightblue);
}

.right-gradient {
    background: linear-gradient(to right, orangered, green, lightblue);
}

.degree-gradient {
    background: linear-gradient(45deg, orangered, green, lightblue);
}

.two-color-gradient {
    background: linear-gradient(-45deg, orangered, lightblue);
}

.background-image {
    background-image:linear-gradient(to bottom, orangered, green, lightblue);
}

Improve this document

Demo Source