|
| 1 | +# ember-cli-jss [![Build Status][buildstat-image]][buildstat-url] |
| 2 | + |
| 3 | +> JSS integration for Ember |
| 4 | +
|
| 5 | +## Install |
| 6 | + |
| 7 | +```bash |
| 8 | +$ npm install --save-dev ember-browserify |
| 9 | +$ npm install --save ember-cli-jss jss jss-preset-default |
| 10 | +``` |
| 11 | + |
| 12 | +## Usage |
| 13 | + |
| 14 | +The property `stylesheet` must be an instance of the `StyleSheet`. |
| 15 | + |
| 16 | +Properties `jssNames` and `jssNameBindings` work like `classNames` and `classNameBindings`, respectively. |
| 17 | + |
| 18 | +When you update properties listed in the `jssObservedProps`, dynamic styles will be updated. |
| 19 | + |
| 20 | +```js |
| 21 | +// ...awesome-component/component.js |
| 22 | + |
| 23 | +import Ember from 'ember'; |
| 24 | +import JSS from 'ember-cli-jss'; |
| 25 | +import stylesheet from './stylesheet'; |
| 26 | + |
| 27 | +export default Ember.Component.extend(JSS, { |
| 28 | + stylesheet, |
| 29 | + jssNames: ['wrapper'], |
| 30 | + jssNameBindings: ['isShow:show'], |
| 31 | + jssObservedProps: ['color'], |
| 32 | + |
| 33 | + color: 'blue', |
| 34 | + isShow: true, |
| 35 | + |
| 36 | + actions: { |
| 37 | + changeColor(color) { |
| 38 | + this.set('color', color); |
| 39 | + }, |
| 40 | + }, |
| 41 | +}); |
| 42 | +``` |
| 43 | + |
| 44 | +Constructor `StyleSheet` accepts the same arguments as [`jss.createStyleSheet`](http://cssinjs.org/js-api?v=v8.0.0#create-style-sheet). |
| 45 | + |
| 46 | +```js |
| 47 | +// ...awesome-component/stylesheet.js |
| 48 | + |
| 49 | +import { StyleSheet } from 'ember-cli-jss'; |
| 50 | + |
| 51 | +export default new StyleSheet({ |
| 52 | + wrapper: { |
| 53 | + width: 600, |
| 54 | + display: 'none', |
| 55 | + }, |
| 56 | + |
| 57 | + show: { |
| 58 | + display: 'block', |
| 59 | + }, |
| 60 | + |
| 61 | + content: { |
| 62 | + color: data => data.color; |
| 63 | + }, |
| 64 | +}); |
| 65 | +``` |
| 66 | + |
| 67 | +```hbs |
| 68 | +{{!-- ...awesome-component/template.hbs --}} |
| 69 | +
|
| 70 | +<button type="button" {{action "changeColor" "green"}}> |
| 71 | + Green |
| 72 | +</button> |
| 73 | +
|
| 74 | +<div class="{{jss 'content'}}"> |
| 75 | + Lorem ipsum... |
| 76 | +</div> |
| 77 | +``` |
| 78 | + |
| 79 | +## Helper |
| 80 | + |
| 81 | +```hbs |
| 82 | +<button class="{{jss 'large' 'primary' disabled=true}}"> |
| 83 | + Submit |
| 84 | +</button> |
| 85 | +``` |
| 86 | + |
| 87 | +## Configuration |
| 88 | + |
| 89 | +Plugin [`jss-preset-default`](https://github.com/cssinjs/jss-preset-default) applied by default. Please note that the work of the dynamic properties depends on [`jss-compose`](https://github.com/cssinjs/jss-compose) plugin. |
| 90 | + |
| 91 | +You can override the `app/initializers/ember-cli-jss.js`. Use `setup`, it takes the same arguments as [`jss.setup`](http://cssinjs.org/js-api?v=v8.0.0#setup-jss-instance). |
| 92 | + |
| 93 | +```js |
| 94 | +// ...app/initializers/ember-cli-jss.js |
| 95 | + |
| 96 | +import { setup } from 'ember-cli-jss'; |
| 97 | +import compose from 'npm:jss-compose'; |
| 98 | + |
| 99 | +export function initialize() { |
| 100 | + setup(compose.default()); |
| 101 | +} |
| 102 | + |
| 103 | +export default { |
| 104 | + name: 'ember-cli-jss', |
| 105 | + initialize, |
| 106 | +}; |
| 107 | +``` |
| 108 | + |
| 109 | +## License |
| 110 | + |
| 111 | +[MIT](LICENSE.md) © [Timofey Dergachev](https://exeto.me/) |
| 112 | + |
| 113 | +[buildstat-url]: https://travis-ci.org/exeto/ember-cli-jss?branch=master |
| 114 | +[buildstat-image]: https://img.shields.io/travis/exeto/ember-cli-jss/master.svg?style=flat-square |
0 commit comments