https://github.com/michalsnik/ember-component-respo

Dimensions-aware responsive breakpoints for ember components
https://github.com/michalsnik/ember-component-respo

Last synced: 24 days ago
JSON representation

Dimensions-aware responsive breakpoints for ember components

• Host: GitHub
• URL: https://github.com/michalsnik/ember-component-respo
• Owner: michalsnik
• License: mit
• Created: 2017-03-07T17:12:50.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-16T15:00:27.000Z (over 7 years ago)
• Last Synced: 2024-10-03T12:34:23.147Z (about 1 month ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 11
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-component-respo

[![NPM version](https://img.shields.io/npm/v/ember-component-respo.svg?style=flat)](https://npmjs.org/package/ember-component-respo)

[![Build Status](https://travis-ci.org/michalsnik/ember-component-respo.svg?branch=master)](https://travis-ci.org/michalsnik/ember-component-respo)

> 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`:

```javascript

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:

```html



  example box



```


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

```javascript

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.