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