Removed console.log, added possibility of choose if fit a specified container (old way) or the element parent

This commit is contained in:
Lorenzo Iovino 2017-06-19 11:24:41 +02:00
parent 97c428f0af
commit 129cb1251c
4 changed files with 67 additions and 22 deletions

View file

@ -32,6 +32,23 @@ Import it in your Angular2 project like a module
```
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" [useMaxFontSize]="false">Bla bla bla...</div>
</div>`
})
export class LabelComponent {}
```
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';
@ -45,6 +62,8 @@ Import it in your Angular2 project like a module
export class LabelComponent {}
```
**NEW! Support for autoresize input box!**
```sh
@ -52,19 +71,38 @@ Import it in your Angular2 project like a module
@Component({
selector: 'inputbox',
template: `<div>
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [useMaxFontSize]="false">`,
template: `<div #container>
<input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true" [useMaxFontSize]="false">`,
</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" [useMaxFontSize]="true">`,
</div>`
})
export class InputBoxComponent {}
```
Parameters:
| Parameter | Description | Values |
| --- | --- | --- |
| fittext | is the selector of the directive | true/false
| container | the container to fit (if not present it fit default to parent container)| ElementRef
| activateOnResize | enable/disable the autofit in case of window resize | true or false (default false)
| activateOnInputEvents | enbale/disable the autofit in case of input box events (keydown, keyup etc..) | true or false (default false)
| useMaxFontSize | Use font-size from element as maximum font-size | enable/disable the usage of max font-size of the lement