@nativescript-community/ui-label

Alternative to the built-in NativeScript Label but with better performance and additional features such as HTML rendering and more.

| | |
| --- | ----------- |
| iOS Demo | Android Demo |

[](#table-of-contents)

Table of Contents

* Installation
* Production build
* Configuration
* Angular
* Vue
* Properties
* Improvements
* Examples:
* Demos and Development
* Repo Setup
* Build
* Demos
* Contributing
* Update repo
* Update readme
* Update doc
* Publish
* modifying submodules
* Questions

[](#installation)

Installation

Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-label

$3

If you are using proguard on Android build you need ensure some resource from this plugin are not minified. You need to add tools:keep="@layout/ns_*" as explained here

[](#configuration)

Configuration

It works exactly the same way as the {N} plugin. However it adds a few improvements

$3

``typescript
import { registerElement } from '@nativescript/angular';

registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
`

`html




[html]="someBindedUrl"
linkColor="#336699"
linkUnderline="true"
(linkTap)="onLinkTap($event)"
fontFamily="OpenSans"
fontSize="16"
margin="2 5 5 5"
textWrap="true"
>
`

`typescript
import { Utils } from '@nativescript/core';

export someComponentClass() {
someBindedUrl = 'Open Youtube.com'

// Event binded to the linkTap function on the HTMLLabel
onLinkTap(args) {
const link = args.link;
// expected to be https://youtube.com from the binded tag href value
// be sure to encodeURIComponent of any query string parameters if needed.
Utils.openUrl(link);
}
}


`

$3

`typescript
import Vue from 'nativescript-vue';

Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
`

`html

fontSize="50"
fontFamily="Cabin Sketch,res/cabinsketch"
width="100%"
paddingTop="5"
color="#336699"
textWrap="true"
:html="someBindedValue"
verticalAlignment="top"
/>


html="Open Youtube.com"
linkColor="pink"
linkUnderline="false"
@linkTap="onLinkTap($event)"
fontFamily="OpenSans"
fontSize="16"
margin="2 5 5 5"
textWrap="true"
>
`

`typescript

`

$3

- html
Html text that will be used to render text. HTML supported tags are a bit different on iOS and Android. To make sure it works as expected, for now only used Android supported ones.

If using a url with parameters, be sure to encode the query string so Android can open the link accordingly.

- verticalTextAlignment
You can also set it through css with vertical-text-alignment

- textShadow
You can also set it through css with text-shadow. The format is offsetx offsety blurradius color

- linkColor
Color for any tags inside the HTMLLabel.

- linkUnderline
Boolean to enable underline for any tags inside the HTMLLabel.
- linkTap
Event to handle taps of any tags inside the HTMLLabel. Access the link property of the event data from the linkTap event. See Samples above for example.


[](#improvements)



Improvements

- Override the {N} font loading system to make it much faster
- faster creation of FormattedString
- faster label creation and drawing, especially on android




$3

- Basic Drawer
- A basic sliding drawer.
- All Sides
- An example of drawers on all sides: left, right, top, bottom.


[](#demos-and-development)



Demos and Development




$3

The repo uses submodules. If you did not clone with --recursive then you need to call
`
git submodule update --init
`

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

To develop and test:
if you use yarn then run yarn
if you use pnpm then run pnpm i

Interactive Menu:

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

$3

`bash
npm run build.all
`
WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

$3

`bash
npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example
`

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue]
Instead you work in demo-snippets/[ng|react|svelte|vue]
You can start from the install.ts of each flavor to see how to register new demos


[](#contributing)



Contributing

$3

You can update the repo files quite easily

First update the submodules

`bash
npm run update
`

Then commit the changes
Then update common files

`bash
npm run sync
`
Then you can run yarn|pnpm, commit changed files if any

$3


`bash
npm run readme
`

$3

`bash
npm run doc
`

$3

The publishing is completely handled by lerna (you can add -- --bump major to force a major release)
Simply run
`shell
npm run publish
`

$3

The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify ~/.gitconfig and add
`
[url "ssh://git@github.com/"]
pushInsteadOf = https://github.com/
``

[](#questions)

Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.