loke/ng2-fittext
1
0
Fork 0
Code Issues 2 Pull requests 2 Projects Releases 3 Packages Wiki Activity Actions

Ref: changed file and folder organization

Browse source
This commit is contained in:
lorenzo 2020-03-12 21:43:21 +01:00
parent dcca18224b
commit d8fafd9e94
49 changed files with 874 additions and 14455 deletions
Download patch file Download diff file Expand all files Collapse all files

95
README.md
View file

@ -2,11 +2,7 @@
An Angular2 directive written in pure typescript (and without jquery!), for autoscale the font size of an element to fit an upper level container.
How many times your font doesn't scale automatically to fit the size of the container? Always, if you don't say it to do that!
How you can say it? ng2-fittext!
### Demo
http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview
### Installation
@ -17,9 +13,6 @@ $ npm install --save ng2-fittext
```
### Usage
Import it in your Angular2 project like a module
1) Declare it in your module
```sh
import {Ng2FittextModule} from "ng2-fittext";
@ -28,73 +21,58 @@ Import it in your Angular2 project like a module
Ng2FittextModule
]
})
```
```
2) Use it in your components
Fit with specified container (can be the parent or a deeper ancestor)
```sh
import {Component} from '@angular/core';
@Component({
selector: 'label',
template: `<div #container>
<div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div>
</div>`
})
export class LabelComponent {}
```
```
###Examples
Fit with the parent element (this works if you have a variable number of element between element and parent)
Fit with the parent element (this works if you have a variable number of element between element and parent)
```sh
import {Component} from '@angular/core';
```sh
import {Component} from '@angular/core';
@Component({
selector: 'label',
template: `<div>
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
</div>`
})
export class LabelComponent {}
```
@Component({
selector: 'label',
template: `<div>
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
</div>`
})
**NEW! Support for autoresize input box!**
export class LabelComponent {}
```
```sh
import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
template: `<div #container>
<input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true">`,
</div>`
})
export class InputBoxComponent {}
```
**NEW! Support for maxFontSize!**
**NEW! Support for autoresize input box!**
```sh
import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
template: `<div #container>
<input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true">`,
</div>`
})
export class InputBoxComponent {}
```
**NEW! Support for maxFontSize!**
```sh
import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
template: `<div>
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100">`,
</div>`
})
export class InputBoxComponent {}
```
```sh
import {Component} from '@angular/core';
@Component({
selector: 'inputbox',
template: `<div>
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100">`,
</div>`
})
export class InputBoxComponent {}
```
Input Parameters:
@ -138,3 +116,4 @@ MIT
**Lorenzo I.**