Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Ember-style-bindings Build Status Code Climate

Provides a way to dynamically build up an inline style attribute for compoonents in a manner simmilar to classNameBindings.

Usage

import StyledComponentMixin from 'ember-style-bindings/mixins/styled-component';

export default Ember.Component.extend(StyledComponentMixin, {
  // A list of CSS properties to be included.
  //   height is pulled from a property named height
  //   width is pulled from a property named theWidth
  //   z-index is correctly named and pulled from the zIndex property
  // styleBindings are inherited from superclasses.
  styleBindings: ['height', 'theWidth:width', 'zIndex'], // eslint-disable-line

  // You can easily include static styles using the styles property (optional)
  //  property names are correctly dasherized
  styles: { // eslint-disable-line
    position: 'absolute',
    top: 0,
    left: 0,
    whiteSpace: 'nowrap'
  },

  height: Ember.computed(function() {
    // do your height calculations
    return 50;
  }),

  theWidth: Ember.computed(function() {
    // do your width calculations
    return 100;
  }),

  zIndex: Ember.computed(function() {
    // do your positional calculations
    return 99;
  })
});

The above component will produce HTML as follows

<div style="height:50px;width:100px;z-index:99;position:absolute;top:0px;left:0px;white-space:nowrap"></div>

NOTE This addon uses attributeBindings: ['style'] and a style property to work.

Instaling

ember install ember-style-bindings

Developing

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

License

This project is licensed under the MIT License.

About

An ember addon providing an easy way to bind styles to a component

Resources

License

Packages

No packages published