Easily and safely bind CSS properties using the `style` attribute.
npm install ember-css-propertiesThis addon let's you easily and safely bind CSS properties in your Ember templates.
This creates a reusable helper to avoid the Binding Style Attributes Deprecation added in Ember 1.11.
ember install ember-css-properties
The ember-css-properties addon provides a handlebars helper called css-properties that can be used to safely bind CSS properties to elements in templates.
This will use cssesc to escape CSS safe strings for each property, and it will return an htmlSafe string to handle the deprecation warning.
For example to bind the background color of a div to a favoriteColor property:
``hbs`
The css-properties helper can also be used with multiple style properties at once:
`hbs`
Finally for libraries and larger computed styles, the css-properties function can also be used with a single object of style properties (see notes and warnings below):
`hbs`
`js`
myStyles: {
color: 'red',
width: '20%',
'background-image': 'url(http://placecage.com/200/200)'
}
This addon only creates escaped CSS strings using cssesc.
For performance, flexibility, and complexity reasons it does not:
- Transform camelCase property names (ex borderRight to border-right)border: { right: '1px solid black }
- Split deeply nested objects (ex to border-right: 1px solid black)
- Apply themes
- Reflect over existing styles
- Compute units
The css-properties` helper can be used as a lower level primitive by component styling libraries or other packages to provide this kind of functionality.
This addon is tested against Ember >2.12, but should work with all 2.\* releases and possibly even further back.
Please submit an issue or PR if this does not support your Ember release.
MIT