# NativeScript Label widget

A NativeScript Label widget. It is a direct replacement for the {N} Label widget.

Installation

Run the following command from the root of your project:

tns plugin add @nativescript-community/ui-label

This command automatically installs the necessary files, as well as stores nativescript-community/ui-label as a dependency in your project's package.json file.

Configuration

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

iOS Performances

On iOS generating html string can be slow using the system way. You can enable DTCoreText to make it faster.

• add pod DTCoreText in your app Podfile at App_Resources/ios

pod 'DTCoreText'

• enable it in your app.(js|ts) (as soon as possible)

require('@nativescript-community/ui-label').enableIOSDTCoreText();

Angular

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

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

<!-- Normal Label Usage -->
<HTMLLabel html="<b>Hello, I am BOLD!></b>" fontFamily="OpenSans" fontSize="16" margin="2 5 5 5" textWrap="true"></HTMLLabel>

<!-- Clickable Link Usage -->
<HTMLLabel
    [html]="someBindedUrl"
    linkColor="#336699"
    linkUnderline="true"
    (linkTap)="onLinkTap($event)"
    fontFamily="OpenSans"
    fontSize="16"
    margin="2 5 5 5"
    textWrap="true"
></HTMLLabel>

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

export someComponentClass() {
    someBindedUrl = '<a href=\"https://youtube.com\">Open Youtube.com</a>'

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

Vue

import Vue from 'nativescript-vue';

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

<!-- Normal Label Usage -->
<HTMLLabel
    fontSize="50"
    fontFamily="Cabin Sketch,res/cabinsketch"
    width="100%"
    paddingTop="5"
    color="#336699"
    textWrap="true"
    :html="someBindedValue"
    verticalAlignment="top"
/>

<!-- Clickable Link Usage -->
<HTMLLabel
    html="<a href='https://youtube.com'>Open Youtube.com</a>"
    linkColor="pink"
    linkUnderline="false"
    @linkTap="onLinkTap($event)"
    fontFamily="OpenSans"
    fontSize="16"
    margin="2 5 5 5"
    textWrap="true"
></HTMLLabel>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    data() {
        return {
            someBindedValue: "<p>This is really powerful. <b>Amazing to be quite honest</b></p>",
        };
    },
    methods: {
        // event binded to the linkTap on the HTMLLabel
        onLinkTap(args) {
            Utils.openUrl(args.link);
        },
    },
    beforeDestroy() {},
});
</script>

Properties

• 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 <a> tags inside the HTMLLabel.

• linkUnderline Boolean to enable underline for any <a> tags inside the HTMLLabel.

• linkTap Event to handle taps of any <a> tags inside the HTMLLabel. Access the link property of the event data from the linkTap event. See Samples above for example.

Improvements

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