Styling

Setting CSS to a page

const page = new pageModule.Page();
page.css = ".title { font-size: 20 }";

Using CSS selectors

Using type selector

page.css = "button { background-color: red; }";

//// Will be styled
btn = new buttonModule.Button();

//// Won't be styled
label = new labelModule.Label();

Using class selector

page.css = ".test { color: red; }";

//// Will be styled
btnWithClass = new buttonModule.Button();
btnWithClass.className = "test";

//// Won't be styled
btnWithNoClass = new buttonModule.Button();

Using id selector

page.css = "#myButton { color: red; }";

//// Will be styled
btnWithId = new buttonModule.Button();
btnWithId.id = "myButton";

//// Won't be styled
btnWithNoId = new buttonModule.Button();

Using state selector

page.css = "button:pressed { color: red; }";

//// Will be red when pressed
btn = new buttonModule.Button();

For information and example how to use style properties please refer to special Styling topic.

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.