Auto Fit Text

@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.

Contents #

• Installation
• Use @nativescript/auto-fit-text
  • Core
  • Angular
  • Vue
  • Svelte
• Credits
• License

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 #

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

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

2. Use the prefix to access the AutoFitText view.

<StackLayout class="p-20">
  <AFT:AutoFitText text="Testinggggggggggggggggg" textWrap="false" />
</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" />
  </StackLayout>
</Page>

Angular #

1. 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],
})

2. 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"
/>

Vue #

1. 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)

2. 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 #

1. 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
)

2. 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