Skip to content

Unified Styling

MDK 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 one format and it will be usable in both iOS and Android.

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

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

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 Nativscript control.

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

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

FormCell

All the formcells controls allow you to style its specific subcontrols. 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;
  color: @red1;
  font-name: italicSystem;
  font-size: 12;
}

This will set the 'Switch' subcontrol of the switchFormcell to use 'FormCellSwitchNormal' style and the 'Caption' subcontrol to use 'FormCellCaptionCritical' style

Background Subcontrol

All formcell controls has a special base subcontrol called: Background. If you set the style of this subcontrol, all of the subcontrols 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;
  color: @red1;
  font-name: italicSystem;
  font-size: 12;
}

This will set the style of all subcontrols (both Switch and Caption) to use 'FormCellBackgroundCritical' in the switchFormcell.

For list of available subcontrol, see table below for details.


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

Subcontrol Table

Control Available Subcontrols
SwitchFormCell Background, Switch, Caption
NoteFormCell Background, Value
TitleFormCell Background, Value
SimplePropertyFormCell Background, Caption, Value
SignatureCaptureFormCell Background, Caption, Value, SignatureCapture, SignatureCaptureUnderline
DatePickerFormCell Background, Caption, Value
DurationPickerFormCell Background, Caption, Value
ListPickerFormCell Background, Caption, Value
SegmentedFormCell Background, Caption
FilterFormCell Background, Caption
AttachmentFormCell Background
ButtonFormCell Background, Value
ObjectCell Title, Subhead, Footnote, Description, StatusText, SubstatusText
ContactCell Headline, Subheadline, Description
SimplePropertyCell KeyName, Value

Standard Colors

The following standard color names are supported in MDK, however, there are certain color names that works only in specific platforms and each platform might render certain color names differently. We highly recommend apps to use hex color code to ensure the correct color is applied.

Color Name iOS Android
aqua X
black X X
blue X X
brown X
cyan X X
darkgray X X
darkgrey X
fuchsia X
gray X X
green X X
grey X
lightgray X X
lightgrey X
lime X
magenta X X
maroon X
navy X
olive X
orange X
purple X X
red X X
silver X
teal X
white X X
yellow X X