@nativescript/auto-fit-text

A plugin that extends the Nativescript Label with the functionality to adjust the font size according to the label's width.

Installation

npm install @nativescript/auto-fit-text

Use @nativescript/auto-fit-text

The following are examples of how to use the @nativescript/auto-fit-text plugin in different JS flavors.

Core

Register the plugin namespace with Page's xmlns attribute providing your prefix( AFT, for example).

<Page xmlns:AFT="@nativescript/auto-fit-text">
...

Use the prefix to access the AutoFitText view.

<StackLayout class="p-20">
  <AFT:AutoFitText
    text="Testinggggggggggggggggg"
    textWrap="false"
  ></AFT:AutoFitText>
</StackLayout>

The following is the complete code that results from the preceding steps:

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  loaded="pageLoaded"
  class="page"
  xmlns:AFT="@nativescript/auto-fit-text"
>
  <StackLayout class="p-20">
    <AFT:AutoFitText
      text="Testinggggggggggggggggg"
      textWrap="false"
    ></AFT:AutoFitText>
  </StackLayout>
</Page>

Angular

Register the view by adding the plugin's module to the NgModule where you want to use the view.

import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angular';

@NgModule({
	imports: [NativeScriptAutoFitTextModule],
})

Use the view in HTML.

<AutoFitText row="2" fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." textWrap="false"></AutoFitText>

Vue

Use the registerElement() function to register the AutoFitText view in the app.ts file.

import { registerElement } from "nativescript-vue"

registerElement("AutoFitText", ()=>require("@nativescript/auto-fit-text").AutoFitText)

Use the view in markup.

<AutoFitText fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." />

Svelte

Use the registerNativeViewElement() function to register the AutoFitText view in the app.ts file.

import {registerNativeViewElement} from "svelte-native/dom"

registerNativeViewElement("autoFitText", ()=> require("@nativescript/auto-fit-text").AutoFitText)

Use the view in a markup of any component.

<autoFitText fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." />

Credits

@grantland - android-autofittextview

License

Apache License Version 2.0, January 2004

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!