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`

Multiple Styling Themes¶

Multiple styling themes can be supported if developers create several different LESS files (.less) in "Styles" folder in metadata. When developers define a LESS style file to the Styles of Application.app, this style is applied for application by default. Developers can dynamically change LESS file used for application via Action or Rule, by SetTheme action or ClientAPI.setTheme().

Developers can get available list of LESS files via ClientAPI.getAvailableThemes() or evaluateTargetPath("#Application/#ClientData/#Property:AvailableThemes"). The file name of LESS file (without .less extension) is the theme name. e.g. If the app have these 2 files in the Styles folder:

MyRedThemeStyles.less
MyBlueThemeStyles.less

Then the app will have MyRedThemeStyles and MyBlueThemeStyles in the available themes.

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: April 14, 2021