83 lines
1.9 KiB
Markdown
83 lines
1.9 KiB
Markdown
# ng2-fittext
|
|
|
|
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
|
|
|
|
Install the library
|
|
```sh
|
|
$ npm install --save ng2-fittext
|
|
```
|
|
|
|
### Usage
|
|
|
|
Import it in your Angular2 project like a directive
|
|
|
|
1) Declare it in your module
|
|
```sh
|
|
import {FittextDirective} from "ng2-fittext/ng2-fittext";
|
|
@NgModule({
|
|
imports: [
|
|
...
|
|
],
|
|
declarations: [
|
|
FittextDirective
|
|
]
|
|
})
|
|
|
|
```
|
|
|
|
1) Use it in your components
|
|
```sh
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'label',
|
|
template: `<div #container>
|
|
<div [fittext]="true" [onResize]="true" [container]="container">Bla bla bla...</div>
|
|
</div>`
|
|
})
|
|
|
|
export class LabelComponent {}
|
|
|
|
```
|
|
|
|
Parameters:
|
|
|
|
| Parameter | Description | Values |
|
|
| --- | --- | --- |
|
|
| fittext | is the selector of the directive | true/false
|
|
| container | the container to fit | ElementRef
|
|
| onResize | enable/disable the autofit in case of window resize | true or false (default false)
|
|
|
|
|
|
|
|
### Development
|
|
|
|
Want to contribute? Great!
|
|
Simply, clone the repository!
|
|
|
|
I created this library because I always spended too much time for solve this problem and because i didn't find nothing on the web (13/03/2017) that do this without jquery and easily integrable in angular2.
|
|
For sure is not a good implementation, maybe is not the best way to do it, but, it do the job.
|
|
|
|
### Todos
|
|
|
|
- Write tests
|
|
- Resolve the problem with long word checking the overflowY
|
|
- Find a better algorithm to find the font-size who fits better the container
|
|
|
|
License
|
|
----
|
|
|
|
ISC
|
|
|
|
|
|
**Lorenzo I.**
|
|
|