ember-inline-styles-modifier v0.0.1

ember-inline-styles-modifier

Provides a modifier to simply and safely set inline styles on elements in Ember templates:

<div {{inline-styles backgroundColor="red"}}></div>
<div {{inline-styles backgroundColor=@color}}></div>
<div {{inline-styles this.myStyles}}></div>
<div {{inline-styles this.myStyles fontSize="20em"}}></div>

Compatibility

• Ember.js v3.8 or above
• Ember CLI v2.13 or above
• Node.js v8 or above

Installation

ember install ember-inline-styles-modifier

Usage

This addon provides a modifier called inline-styles that applies CSS styles directly to the element it is used on. The camel case convention must be used when specifying CSS property names.

It can be used for simple static styles:

<div {{inline-styles backgroundColor="red"}}></div>

Which is identical to writing

<div style="background-color: red"></div>

A more interesting use case is a dynamic style based on an argument passed to the component:

<div {{inline-styles backgroundColor=@backgroundColor}}></div>

A more advanced use case would be applying a set of dynamic styles that are defined by the component's backing class:

<div {{inline-styles this.myStyles}}></div>

import Component from "@glimmer/component";

class MyComponent extends Component {
    get myStyles() {
        return {
            backgroundColor: this.args.backgroundColor,
            padding: this.args.backgroundColor === "red" ? "20px" : "10px"
        }
    }
}

The inline-styles modifier accepts both named arguments and positional arguments. Named arguments will be interpreted as individual CSS properties to apply:

<div {{inline-styles backgroundColor=@backgroundColor}}></div>

Each positional argument will be interpreted as a POJO specifying CSS properties to set:

<div {{inline-styles this.myStyles this.moreStyles}}></div>

If the value of a CSS property provided to the inline-styles modifier is null, undefined, or an empty string, then it will be treated as if it were absent and the style will be removed from the element.

If a CSS property is specified both by a positional argument and by a named argument then the named argument takes precedence. If a CSS property is specified by multiple positional arguments then the last one takes precedence.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.