ember-cli-jss
JSS integration for Ember
Install
$ npm install --save ember-cli-jss
Usage
The property stylesheet
must be an instance of the StyleSheet
.
Properties jssNames
and jssNameBindings
work like classNames
and classNameBindings
, respectively.
When you update properties listed in the jssObservedProps
, dynamic styles will be updated.
// ...awesome-component/component.js ;;; ; // For tag-less component use TaglessJSS;
Constructor StyleSheet
accepts the same arguments as jss.createStyleSheet
.
// ...awesome-component/stylesheet.js ; StyleSheet wrapper: width: 600 display: 'none' show: display: 'block' content: datacolor ;
{{!-- ...awesome-component/template.hbs --}} <button type="button" {{action "changeColor" "green"}}> Green</button> <div class="{{jss 'content'}}"> Lorem ipsum...</div>
Helper
<button class="{{jss 'large' 'primary' disabled=true}}"> Submit</button>
Configuration
Plugin jss-preset-default
applied by default. Please note that the work of the dynamic properties depends on jss-compose
plugin.
You can override the app/initializers/ember-cli-jss.js
.
// ...app/initializers/ember-cli-jss.js ;; { jss;} name: 'ember-cli-jss' initialize;