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" />

Border Basics

Setting border properties thought CSS class.

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

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;

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;
}

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);
}