# NativeScript 标签小部件

A NativeScript 标签小部件。它是 {N} 标签小部件的直接替代品。

安装

从您项目的根目录运行以下命令

tns plugin add @nativescript-community/ui-label

此命令将自动安装必要的文件，并将 nativescript-community/ui-label 作为依赖项存储在您的项目 package.json 文件中。

生产构建

如果您正在使用 Android 构建中的 proguard，您需要确保此插件的一些资源不被压缩。您需要添加 tools:keep="@layout/ns_*"，如此处所述

配置

它的工作方式与 {N} 插件完全相同。然而，它添加了一些改进

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>

属性

• html
  用于渲染文本的 HTML 文本。iOS 和 Android 上支持的 HTML 标签略有不同。为了确保它按预期工作，目前只支持 Android 支持的标签。

  如果使用带参数的 url，请确保对查询字符串进行编码，以便 Android 可以相应地打开链接。

• verticalTextAlignment
  您也可以通过 css 中的 vertical-text-alignment 设置它

• textShadow
  您也可以通过 css 中的 text-shadow 设置它。格式为 offsetx offsety blurradius color

• linkColor 任何 <a> 标签在 HTMLLabel 中的颜色。

• linkUnderline 布尔值，用于启用 <a> 标签在 HTMLLabel 中的下划线。

• linkTap 事件，用于处理 <a> 标签在 HTMLLabel 中的点击。从 linkTap 事件的数据中访问 link 属性。请参见上面的示例。

改进

• 覆盖 {N} 字体加载系统，使其速度更快
• 创建 FormattedString 的速度更快
• 标签创建和绘制速度更快，特别是在 Android 上