An ember for providing autoresizing components (includes {{input}} and {{textarea}} autoresizing out of the box)
npm install 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.)
To enable autoresizing on an input, add the following to your handlebars:
``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:
`handlebars`
{{textarea autoresize=true}}
#### max-width
Set the maximum width of the resizeable element. If no unit is provided, it assumes that it's in pixels.
`handlebars`
{{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.
`handlebars`
{{input autoresize=true max-height=300}}
#### rows
Set the minimum number of rows for the element. Recommended for textareas.
`handlebars`
{{textarea autoresize=true rows=2}}
#### max-rows
Set the maximum number of rows for the element. Recommended for textareas.
`handlebars`
{{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.
`js
import Ember from 'ember';
export default Ember.Component.extend({
autoresizeElementDidChange: on('didInsertElement', function () {
set(this, 'autoresizeElement', this.$('input')[0]);
})
});
`
`bash`
ember install ember-autoresize
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.
To publish documentation (under the tests/dummy directory) run the following command:
`bash``
npm run-script publish-docs