NativeScript Outlined Labels

This plugin extends the NativeScript Label component to support outlined text.

Outlined text is the only good way to ensure that you text will always be able to be clearly read regardless of what background is behind it, which becomes more important when your background is non-deterministic or moving (e.g. video).

Prerequisites / Requirements

None.

Installation

ns plugin add @plmservices/nativescript-outline-label

Usage

You must add the appropriate xmlns tag to your XML file, e.g.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:outlineLabel="@plmservices/nativescript-outline-label" class="page">

Once that is done you can use the new outlineLabel tag in your XML, e.g.

<outlineLabel:OutlineLabel text="CSS on Element" />

This can be styled via CSS on the OutlineLabel element, a class or an id, e.g. to set yellow text with a black outline

OutlineLabel {
	color: yellow;
	outline: 4 black;
}

Or it can be styled directly in the tag, e.g.

<outlineLabel:OutlineLabel text="Outline in attribute" color="yellow" outline="4 red" />
<outlineLabel:OutlineLabel text="Outline in style" color="yellow" style="outline: 4 green" />

TODO

• Angular demo app
• Vue demo app

Donation

If this project helped you reduce your development time, you could consider helping me with a cup of coffee or some electricity :)

License

Apache License Version 2.0