Styling

Mobile Development Kit support styling with LESS (which stands for Leaner Style Sheets) to support multi-platforms styling capability. It is backwards-compatible with CSS (for NativeScript controls) and NSS (for iOS) and support Android too. With Less style file, you only need to define your styles in 1 format and it will be usable in all platforms.

More info on Less (Leaner Style Sheets) can be found here.

Variables

It's not uncommon to see the same value repeated dozens if not hundreds of times across your style-sheets:

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

Variables make your code easier to maintain by giving you a way to control those values from a single location:

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

More info on Less variables feature can be found here.

By-Class Styling

This is the standard way to style controls dynamically (i.e. through rules).

Styles are defined in the LESS file as .SomeClass and then all controls marked to have that class (without the prefix dot ".") will use those styles.

Static Styling (via Metadata Definitions)

{
  // ...
  "Buttons": [{
    "Title" : "Delete",
    "Style": "SomeClass"
  }]
}

Dynamic Styling (via Rules)

The following APIs are available to apply styles at runtime to a NativeScript control.

export default function someRule(clientAPI) {
  control = clientAPI.getControl()
  control.setStyle('SomeClass');
  control.setStyle('SomeClass', 'SubControl');
}

If no sub control is given, the style is applied to the entire control.

Form Cell

All the form cells controls allow you to style its specific sub controls. In order to utilize this styling from a rule you should add something like:

switchFormcell.setStyle("FormCellSwitchNormal", "Switch");
switchFormcell.setStyle("FormCellSwitchCritical", "Caption");

into the code.

The styles might contain e.g. the following settings:

.FormCellSwitchNormal {
 background-color: @green1;
}

.FormCellCaptionCritical {
 background-color: @green1;
 tint-color: @purple1;
 font-color: @red1;
 font-name: italicSystem;
 font-size: 12;
}

This will set the 'Switch' sub control of the SwitchFormcell to use 'FormCellSwitchNormal' style and the 'Caption' sub control to use 'FormCellCaptionCritical' style

Background Sub Control

All form cell controls has a special base sub control called: Background. If you set the style of this sub control, all of the sub controls inside the cell receive the same style. In order to utilize this styling from a rule you should add something like:

switchFormcell.setStyle("FormCellBackgroundCritical", "Background");

into the code.

The style 'FormCellBackgroundCritical' might contain e.g. the following settings:

FormCellBackgroundCritical {
 background-color: @green1;
 tint-color: @purple1;
 font-color: @red1;
 font-name: italicSystem;
 font-size: 12;
}

This will set the style of all sub controls (both Switch and Caption) to use 'FormCellBackgroundCritical' in the SwitchFormcell.

By-Name Styling

Styles are defined in the LESS file as #SomeName and all NativeScript controls with _Name equal to SomeName in your metadata definitions will have the desired style automatically.

Note: The Toolbar doesn't have its own _Name in the metadata, so it can be accessed through its host page's name by adding _ToolBar to it, i.e. using #<PageName>_ToolBar.

By-Type Styling

Styles are defined in the LESS file as SomeType and all NativeScript controls of this particular type will have the desired style automatically.

Available Type	Control Type ({N})
ActionBar	ActionBar
MDKPage	Page
ToolBar	ToolBar

Examples

Application.app

{
  "MainPage": "/MDKDevApp/Pages/Main.page",
  "_Name": "MDKDevApp",
  "Version": "1.0.0",
  "Styles": "/MDKDevApp/Styles/Styles.less"
}

Styles.less

@mdkYellow1:                  #ffbb33;
@mdkRed1:                     #ff0000;

/* By-Type style: All Pages in the application will now have a yellow background */
MDKPage {
  background-color: @mdkYellow1;
}

/* By-Name style: All Buttons with _Name == "BlueButton" will now have this style */
#BlueButton {
  color: @mdkYellow1;
  background-color: #0000FF;
}

/* By-Class style: These style classes can be referenced from rules */
.MyButton {
  color: @mdkYellow1;
  background-color: @mdkRed1;
}

---

Last update: December 16, 2020