ember-text-resize/README.md

Easily resize texts to fit the container.

# ember-text-resize

Easily resize texts to fit the container.

## Installation

```sh
ember install ember-text-resize
```

## Demo

[https://brunosalgado1985.github.io/demos/ember-text-resize/](https://brunosalgado1985.github.io/demos/ember-text-resize/)

## Usage

Pass the text to `text-resize` component:  
```hbs
<div class="row">
	<div class="columns small-2">
		{{text-resize text="999.999.999,99"}}
	</div>
</div>
```

Or wrap it:
```hbs
<div class="row">
	<div class="columns small-2">
		{{#text-resize}}
			999.999.999,99
		{{/text-resize}}
	</div>
</div>
```

## Settings
* `fontSize`: initial font size (default: element _css font-size_)
* `minFontSize`: minimum font size
* `maxFontSize`: maximum font size
* `step`: pixels to maximize/minimize the text until it fit. (default: -2)
* `alwaysVisible`: show the text while it's resizing. (default: _false_)
* `text`: text to fit on the container.

### Maximize the text

Set a positive value on `step`.  
```hbs
<div class="row">
	<div class="columns small-12">
		{{#text-resize step=4}}
			999.999.999,99
		{{/text-resize}}
	</div>
</div>
```

### Minimize the text

Set a negative value on `step`.  
```hbs
<div class="row">
	<div class="columns small-2">
		{{#text-resize step=-4}}
			999.999.999,99
		{{/text-resize}}
	</div>
</div>
```

### Working asynchronous

```js
import Ember from 'ember';

export default Ember.Controller.extend({

	init() {
		this._super(...arguments);

		setTimeout(() => {
			Ember.set(this, 'myText1', '999.999.999,99');
			Ember.set(this, 'myText2', '999.999.999,99');
		}, 1000);
	},

});
```

```hbs
<div class="row">
	<div class="columns small-6">
		{{text-resize step=4 text=myText1}}
	</div>
	<div class="columns small-6">
		{{#text-resize step=-4}}
			{{myText2}}
		{{/text-resize}}
	</div>
</div>
```

### Max and Min Font Size

Use `minFontSize` and `maxFontSize` to set the size limits.  
```hbs
<div class="row">
	<div class="columns small-6">
		{{text-resize step=3 text=myText1 maxFontSize=40}}
	</div>
	<div class="columns small-1">
		{{#text-resize step=-4 minFontSize=12}}
			{{myText2}}
		{{/text-resize}}
	</div>
</div>
```