ember-autoresize v1.3.2
Ember AutoResize

Note: if you're using a version of Ember less than 1.12.0
, then please use 0.4.1
of this addon.
Ember AutoResize is an Ember-CLI addon for providing autoresize functionality to Ember. This package currently provides the necessary bootstrapping for {{input}}
and {{textarea}}
components.
To play with the addon, look at our demo. (Note: The demo is a bit out of date, check the documentation below for proper usage.)
Usage
To enable autoresizing on an input, add the following to your handlebars:
{{input autoresize=true}}
Refresh your page, and you should see that when you type in your text field, it automatically resizes to fit the text.
Textareas work exactly the same way:
{{textarea autoresize=true}}
Options
max-width
Set the maximum width of the resizeable element. If no unit is provided, it assumes that it's in pixels.
{{input autoresize=true max-width=200}}
max-height
Set the maximum width of the element. If no unit is provided, it assumes that it's in pixels.
{{input autoresize=true max-height=300}}
rows
Set the minimum number of rows for the element. Recommended for textareas.
{{textarea autoresize=true rows=2}}
max-rows
Set the maximum number of rows for the element. Recommended for textareas.
{{textarea autoresize=true max-rows=10}}
If you are making custom inputs using raw DOM elements, you can still use autoresize
by specifying a custom autoresizeElement
when you mixin the autoresize to your component.
import Ember from 'ember';
export default Ember.Component.extend({
autoresizeElementDidChange: on('didInsertElement', function () {
set(this, 'autoresizeElement', this.$('input')[0]);
})
});
Installation
ember install ember-autoresize
Roadmap
- Optimize style lookups
- Font fitting
- Clearer ways to enable autoresizing on templates
Contributing
Contributors are welcome! Please provide a reproducible test case. Details will be worked out on a case-per-case basis. Maintainers will get in touch when they can, so delays are possible. For contribution guidelines, see the code of conduct.
Publishing Documentation
To publish documentation (under the tests/dummy directory) run the following command:
npm run-script publish-docs
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago