diff --git a/README.md b/README.md index f6a79b3..904e4ed 100644 --- a/README.md +++ b/README.md @@ -1,80 +1,91 @@ # ng2-fittext -An Angular2 directive written in pure typescript (and without jquery!), to autoscale the font size of an element so that it fits an upper level container. +An Angular 2+ directive, written in pure TypeScript (without jQuery!), to automatically scale the font size of an element so that it fits within its parent container. -### Demo +## Demo -http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview +Check out the live demo: [ng2-fittext Demo](http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview) -### Installation +## Installation -Install the library +Install the library using npm: -```sh +``` $ npm install --save ng2-fittext ``` ### Usage -1. Declare it in your module - ```sh - import {Ng2FittextModule} from "ng2-fittext"; - @NgModule({ - imports: [ - Ng2FittextModule - ] - }) - ``` -2. Use it in your components - ```sh - import {Component} from '@angular/core'; - @Component({ - selector: 'label', - template: `
-
Bla bla bla...
-
` - }) - export class LabelComponent {} - ``` +1. Import the module in your Angular application: +``` +import { Ng2FittextModule } from "ng2-fittext"; -### Examples +@NgModule({ + imports: [Ng2FittextModule] +}) +``` -Fit to the parent element (this works if you have a variable number of elements between your element and its parent) +2. Use the directive in your components: +``` +import { Component } from '@angular/core'; -```sh -import {Component} from '@angular/core'; @Component({ selector: 'label', - template: `
-
Bla bla bla...
-
` + template: ` +
+
Bla bla bla...
+
+ ` }) export class LabelComponent {} ``` -**NEW! Support for autoresize input box!** +### Examples + +Fit to the parent element (works if you have a variable number of elements between your element and its parent): + +``` +import { Component } from '@angular/core'; + +@Component({ + selector: 'label', + template: ` +
+
Bla bla bla...
+
+ ` +}) +export class LabelComponent {} +``` + +**NEW! Support for auto-resize input box:** + +``` +import { Component } from '@angular/core'; -```sh -import {Component} from '@angular/core'; @Component({ selector: 'inputbox', - template: `
- `, -
` + template: ` +
+ +
+ ` }) - export class InputBoxComponent {} ``` -**NEW! Support for maxFontSize!** +**NEW! Support for maxFontSize:** + +``` +import { Component } from '@angular/core'; -```sh -import {Component} from '@angular/core'; @Component({ selector: 'inputbox', - template: `
- `, -
` + template: ` +
+ +
+ ` }) export class InputBoxComponent {} ``` @@ -83,33 +94,33 @@ Input Parameters: | Parameter | Description | Values | | ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- | -| fittext | the directive selector | true/false | -| container | the container to fit (if not present it fits to the parent container by default) | ElementRef | -| activateOnResize | enable/disable the autofit in case of window resize | true or false (default false) | -| activateOnInputEvents | enable/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false) | -| maxFontSize | maximum font size | number, default is 1000 | -| **!deprecated!** useMaxFontSize | use max font size if is true | deprecated! | -| minFontSize | minimum font size | number, default is 7 | -| modelToWatch | pass model to watch, when this model changes -> font size is automatically recalculated | any type of model | +| fittext | Directive selector | true/false | +| container | The container to fit (if not present it fits to the parent container by default) | ElementRef | +| activateOnResize | Enable/disable the autofit on window resize | true or false (default false) | +| activateOnInputEvents | Enable/disable the auto-fit in case of input box events (keydown, keyup etc..) | true or false (default false) | +| maxFontSize | Maximum font size | Number (default is 1000) | +| **!deprecated!** useMaxFontSize | Use max font size if is true | Deprecated! | +| minFontSize | Minimum font size | Number (default is 7) | +| modelToWatch | Pass model to watch; when this model changes, font size is automatically recalculated | Any type of model | Output Parameters: | Parameter | Description | Values | | --------------- | ----------------- | ------ | -| fontSizeChanged | current font size | string | +| fontSizeChanged | Current font size | string | ### Development Want to contribute? Great! Simply, clone the repository! -I created this library because I always spent too much time to solve this problem and didn't find anything on the web (13/03/2017) that does this without jquery and that is also easily integrable in angular2. -For sure it is not the best implementation, maybe is not the best way to do it, but, it gets the job done. +I created this library because I always spent too much time solving this problem and didn't find anything on the web (as of 13/03/2017) that does this without jQuery and is easily integrable in Angular 2+. +While it might not be the best implementation, it gets the job done. ### Todos - Write tests -- Find a better algorithm to find the font-size who fits better the container +- Find a performant algorithm to find the font size that fits the container better ## License