https://github.com/ivanvanderbyl/ember-computed-style
Computed style property for your components
https://github.com/ivanvanderbyl/ember-computed-style
css css-in-js ember-addon ember-cli-addon
Last synced: 4 months ago
JSON representation
Computed style property for your components
- Host: GitHub
- URL: https://github.com/ivanvanderbyl/ember-computed-style
- Owner: ivanvanderbyl
- License: mit
- Created: 2015-12-03T07:41:21.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:16:55.000Z (about 3 years ago)
- Last Synced: 2025-10-01T11:20:10.607Z (4 months ago)
- Topics: css, css-in-js, ember-addon, ember-cli-addon
- Language: JavaScript
- Size: 327 KB
- Stars: 41
- Watchers: 1
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-computed-style [](https://travis-ci.org/ivanvanderbyl/ember-computed-style) [](https://emberobserver.com/addons/ember-computed-style)
Provides a simple computed property mixin for Ember Components to compute styles
from objects similar how it can be done in React.
# Usage
Take this example code:
```javascript
import computedStyle from 'ember-computed-style';
export default Ember.Component.extend({
style: computedStyle('styleProperties'),
styleProperties: {
position: 'absolute',
top: 10,
left: 50
},
attributeBindings: ['style'],
});
```
This will set style to a CSS style string computed from the returned object from
the handler function. The value of this will be correctly encoded as:
```css
position: absolute; top: 10px; left: 50px;
```
Properties which are not designated to have a unit value will be left as is,
otherwise `px` unit will be added if they're a Number.
You can also compute it from multiple property bindings, if each of them return
an object keyed on the CSS property name:
```javascript
import computedStyle from 'ember-computed-style';
export default Ember.Component.extend({
style: computedStyle('horizontalPosition', 'verticalPosition', 'positionType'),
positionType: {
position: 'absolute'
},
verticalPosition: computed('targetRect', function() {
const targetRect = this.get('targetRect');
return {top: targetRect.top + 10};
}),
horizontalPosition: computed(function() {
return {left: 50};
}),
attributeBindings: ['style'],
});
```
### Installation
* `ember install ember-computed-style`
### Linting
* `npm run lint:js`
* `npm run lint:js -- --fix`
### Running tests
* `ember test` – Runs the test suite on the current Ember version
* `ember test --server` – Runs the test suite in "watch mode"
* `ember try:each` – Runs the test suite against multiple Ember versions
* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`
### Running the dummy application
* `ember serve`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).