Skip to content

README.md

Latest commit

 

History

History
118 lines (84 loc) · 2.86 KB

README.md

File metadata and controls

118 lines (84 loc) · 2.86 KB

@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

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