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:
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:
Options
max-width
Set the maximum width of the resizeable element. If no unit is provided, it assumes that it's in pixels.
max-height
Set the maximum width of the element. If no unit is provided, it assumes that it's in pixels.
rows
Set the minimum number of rows for the element. Recommended for textareas.
max-rows
Set the maximum number of rows for the element. Recommended for textareas.
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