{"id":19220105,"url":"https://github.com/nativescript-community/ui-label","last_synced_at":"2025-04-15T20:51:31.350Z","repository":{"id":56141782,"uuid":"157970040","full_name":"nativescript-community/ui-label","owner":"nativescript-community","description":"Alternative to the built-in NativeScript Label but with better performance and additional features such as HTML rendering and more.","archived":false,"fork":false,"pushed_at":"2025-02-19T08:51:07.000Z","size":5575,"stargazers_count":19,"open_issues_count":12,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-04T18:03:10.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["farfromrefug"]}},"created_at":"2018-11-17T09:32:57.000Z","updated_at":"2025-02-19T08:51:11.000Z","dependencies_parsed_at":"2024-03-18T14:50:59.281Z","dependency_job_id":"5b6a4d87-9961-44a4-8de7-5a9780c0a381","html_url":"https://github.com/nativescript-community/ui-label","commit_stats":{"total_commits":371,"total_committers":5,"mean_commits":74.2,"dds":"0.15902964959568733","last_synced_commit":"77652e9fb142539708f6a41622086d1d8434a2f7"},"previous_names":["akylas/nativescript-label"],"tags_count":143,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-label","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-label/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-label/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-label/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-label/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249153915,"owners_count":21221330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T14:34:01.935Z","updated_at":"2025-04-15T20:51:31.334Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-label\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-label?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-label.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-label\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-label.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eAlternative to the built-in NativeScript Label but with better performance and additional features such as HTML rendering and more.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://raw.githubusercontent.com/nativescript-community/ui-label/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://raw.githubusercontent.com/nativescript-community/ui-label/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n\t* [Production build](#production-build)\r\n* [Configuration](#configuration)\r\n\t* [Angular](#angular)\r\n\t* [Vue](#vue)\r\n\t* [Properties](#properties)\r\n* [Improvements](#improvements)\r\n\t* [Examples:](#examples)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-label`\n\n### Production build\n\nIf 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](https://developer.android.com/build/shrink-code#keep-resources)\n\n\r\n[](#configuration)\r\n\r\n\r\n[](#configuration)\r\n\r\n## Configuration\n\nIt works exactly the same way as the {N} plugin. However it adds a few improvements\n\n### Angular\n\n```typescript\nimport { registerElement } from '@nativescript/angular';\n\nregisterElement('HTMLLabel', () =\u003e require('@nativescript-community/ui-label').Label);\n```\n\n```html\n\u003c!-- Normal Label Usage --\u003e\n\u003cHTMLLabel html=\"\u003cb\u003eHello, I am BOLD!\u003e\u003c/b\u003e\" fontFamily=\"OpenSans\" fontSize=\"16\" margin=\"2 5 5 5\" textWrap=\"true\"\u003e\u003c/HTMLLabel\u003e\n\n\u003c!-- Clickable Link Usage --\u003e\n\u003cHTMLLabel\n    [html]=\"someBindedUrl\"\n    linkColor=\"#336699\"\n    linkUnderline=\"true\"\n    (linkTap)=\"onLinkTap($event)\"\n    fontFamily=\"OpenSans\"\n    fontSize=\"16\"\n    margin=\"2 5 5 5\"\n    textWrap=\"true\"\n\u003e\u003c/HTMLLabel\u003e\n```\n\n```typescript\nimport { Utils } from '@nativescript/core';\n\nexport someComponentClass() {\n    someBindedUrl = '\u003ca href=\\\"https://youtube.com\\\"\u003eOpen Youtube.com\u003c/a\u003e'\n\n    // Event binded to the linkTap function on the HTMLLabel\n    onLinkTap(args) {\n        const link = args.link;\n        // expected to be https://youtube.com from the binded `\u003ca\u003e` tag href value\n        // be sure to encodeURIComponent of any query string parameters if needed.\n        Utils.openUrl(link);\n    }\n}\n\n\n```\n\n### Vue\n\n```typescript\nimport Vue from 'nativescript-vue';\n\nVue.registerElement('HTMLLabel', () =\u003e require('@nativescript-community/ui-label').Label);\n```\n\n```html\n\u003c!-- Normal Label Usage --\u003e\n\u003cHTMLLabel\n    fontSize=\"50\"\n    fontFamily=\"Cabin Sketch,res/cabinsketch\"\n    width=\"100%\"\n    paddingTop=\"5\"\n    color=\"#336699\"\n    textWrap=\"true\"\n    :html=\"someBindedValue\"\n    verticalAlignment=\"top\"\n/\u003e\n\n\u003c!-- Clickable Link Usage --\u003e\n\u003cHTMLLabel\n    html=\"\u003ca href='https://youtube.com'\u003eOpen Youtube.com\u003c/a\u003e\"\n    linkColor=\"pink\"\n    linkUnderline=\"false\"\n    @linkTap=\"onLinkTap($event)\"\n    fontFamily=\"OpenSans\"\n    fontSize=\"16\"\n    margin=\"2 5 5 5\"\n    textWrap=\"true\"\n\u003e\u003c/HTMLLabel\u003e\n```\n\n```typescript\n\u003cscript lang=\"ts\"\u003e\nimport Vue from 'vue';\n\nexport default Vue.extend({\n    data() {\n        return {\n            someBindedValue: \"\u003cp\u003eThis is really powerful. \u003cb\u003eAmazing to be quite honest\u003c/b\u003e\u003c/p\u003e\",\n        };\n    },\n    methods: {\n        // event binded to the linkTap on the HTMLLabel\n        onLinkTap(args) {\n            Utils.openUrl(args.link);\n        },\n    },\n    beforeDestroy() {},\n});\n\u003c/script\u003e\n```\n\n### Properties\n\n-   **html**  \n    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](https://stackoverflow.com/questions/9754076/which-html-tags-are-supported-by-android-textview).\n\n    If using a `url` with parameters, be sure to encode the query string so Android can open the link accordingly.\n\n-   **verticalTextAlignment**  \n    You can also set it through css with `vertical-text-alignment`\n\n-   **textShadow**  \n    You can also set it through css with `text-shadow`. The format is `offsetx offsety blurradius color`\n\n-   **linkColor**\n    Color for any `\u003ca\u003e` tags inside the `HTMLLabel`.\n\n-   **linkUnderline**\n    Boolean to enable underline for any `\u003ca\u003e` tags inside the `HTMLLabel`.\n-   **linkTap**\n    Event to handle taps of any `\u003ca\u003e` tags inside the `HTMLLabel`. Access the `link` property of the event data from the `linkTap` event. See Samples above for example.\n\n\r\n[](#improvements)\r\n\r\n\r\n[](#improvements)\r\n\r\n## Improvements\n\n-   Override the {N} font loading system to make it much faster\n-   faster creation of `FormattedString`\n-   faster label creation and drawing, especially on android\n\n\n### Examples:\n\n- [Basic Drawer](demo-snippets/vue3/BasicDrawer.vue)\n  - A basic sliding drawer.\n- [All Sides](demo-snippets/vue3/AllSides.vue)\n  - An example of drawers on all sides: left, right, top, bottom.\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo 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]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo 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]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-label","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-label","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-label/lists"}