Nutritious Pomegranate Muffins

    ember-autoresize

    1.3.2 • Public • Published

    Ember AutoResize Ember Observer Score Code Climate

    Greenkeeper badge

    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

    Install

    npm i ember-autoresize

    DownloadsWeekly Downloads

    3,904

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    51.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • tce