View on GitHub

@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"
  ></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 ​

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"></AutoFitText>

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