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

Update README.md

Browse source
This commit is contained in:
Lorenzo Iovino 2024-01-11 15:25:34 +01:00 • committed by GitHub
parent 26b739726f
commit 8b7a07aeb3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 69 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

127
README.md
View file

@ -1,80 +1,91 @@
# ng2-fittext # 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 $ npm install --save ng2-fittext
``` ```
### Usage ### Usage
1. Declare it in your module 1. Import the module in your Angular application:
```sh ```
import {Ng2FittextModule} from "ng2-fittext"; import { Ng2FittextModule } from "ng2-fittext";
@NgModule({
imports: [
Ng2FittextModule
]
})
```
2. Use it in your components
```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 @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({ @Component({
selector: 'label', selector: 'label',
template: `<div> template: `
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div> <div #container>
</div>` <div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div>
</div>
`
}) })
export class LabelComponent {} 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: `
<div>
<div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
</div>
`
})
export class LabelComponent {}
```
**NEW! Support for auto-resize input box:**
```
import { Component } from '@angular/core';
```sh
import {Component} from '@angular/core';
@Component({ @Component({
selector: 'inputbox', selector: 'inputbox',
template: `<div #container> template: `
<input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true">`, <div #container>
</div>` <input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true">
</div>
`
}) })
export class InputBoxComponent {} export class InputBoxComponent {}
``` ```
**NEW! Support for maxFontSize!** **NEW! Support for maxFontSize:**
```
import { Component } from '@angular/core';
```sh
import {Component} from '@angular/core';
@Component({ @Component({
selector: 'inputbox', selector: 'inputbox',
template: `<div> template: `
<input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100">`, <div>
</div>` <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100">
</div>
`
}) })
export class InputBoxComponent {} export class InputBoxComponent {}
``` ```
@ -83,33 +94,33 @@ Input Parameters:
| Parameter | Description | Values | | Parameter | Description | Values |
| ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- | | ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- |
| fittext | the directive selector | true/false | | fittext | Directive selector | true/false |
| container | the container to fit (if not present it fits to the parent container by default) | ElementRef | | 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) | | activateOnResize | Enable/disable the autofit on 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) | | 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 | | maxFontSize | Maximum font size | Number (default is 1000) |
| **!deprecated!** useMaxFontSize | use max font size if is true | deprecated! | | **!deprecated!** useMaxFontSize | Use max font size if is true | Deprecated! |
| minFontSize | minimum font size | number, default is 7 | | 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 | | modelToWatch | Pass model to watch; when this model changes, font size is automatically recalculated | Any type of model |
Output Parameters: Output Parameters:
| Parameter | Description | Values | | Parameter | Description | Values |
| --------------- | ----------------- | ------ | | --------------- | ----------------- | ------ |
| fontSizeChanged | current font size | string | | fontSizeChanged | Current font size | string |
### Development ### Development
Want to contribute? Great! Want to contribute? Great!
Simply, clone the repository! 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. 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+.
For sure it is not the best implementation, maybe is not the best way to do it, but, it gets the job done. While it might not be the best implementation, it gets the job done.
### Todos ### Todos
- Write tests - 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 ## License