Nightmare Prom Memories

    ember-component-respo

    1.1.0 • Public • Published

    ember-component-respo

    NPM version Build Status

    This is an addon that enhances components with dynamic classes based on their actual sizes, regardless of window width.

    🚀 Usage

    1. Install addon:

    ember install ember-component-respo
    

    2. Setup respo breakpoints and classNameBindings:

    export default Ember.Component.extend({
      classNames: ['example-box'],
      classNameBindings: ['respoClassNames'],
      respo: [300, 480, 640],
    });

    Depending on the actual component's size it will add proper class names on top of it, like so:

    <div id="ember332" class="example-box gt-300 gte-300 lt-480 lte-480 lt-640 lte-640 ember-view">
      example box
    </div>

    Default prefixes are: gt, gte, eq, lt, lte. If you want to disable some, use the object form of respo for configuration:

    export default Ember.Component.extend({
      classNames: ['example-box'],
      classNameBindings: ['respoClassNames'],
      respo: {
        breakpoints: [300, 480, 640],
        prefixes: ['gt', 'lt'],
      },
    });

    🔓 License

    This library is released under the MIT license.

    Install

    npm i ember-component-respo

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • michalsnik