ember-class-modifier
v1.0.0
Published
Ember: Declarative class management modifier
Downloads
110
Readme
ember-class-modifier
This class
modifier made for declarative class management for DOM elements.
Why?
<div
class="
ui flat item
{{if this.loading ' loading'}}
{{if this.hasErrors ' error'}}">
</div>
To
<div {{class 'ui flat item'
loading=this.loading
error=this.hasErrors
}}></div>
Compatibility
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
FastBoot support
Currently, modifiers don't work in FastBoot. To prevent "Blinking" you can add critical classes as standard class
attribute. After modifier initialization it node.classList
will be replaced.
<div
class="ui flat item"
{{class 'ui flat item'
loading=this.loading
error=this.hasErrors
}}>
</div>
Installation
ember install ember-class-modifier
Usage
- Modifier rewrite all classes in element.
<div {{class 'my-name'}}></div>
{{!-- Rendered AS: --}}
<div class="my-name"></div>
<div {{class 'my-name' 'gold-color'}}></div>
{{!-- Rendered AS: --}}
<div class="my-name gold-color"></div>
<div {{class my-name=false}}></div>
{{!-- Rendered AS: --}}
<div></div>
<div {{class my-name=true}}></div>
{{!-- Rendered AS: --}}
<div class="my-name"></div>
<div {{class 'red-dot' my-name=true}}></div>
{{!-- Rendered AS: --}}
<div class="red-dot my-name"></div>
<div {{class (array 'class-one' 'class-two')}}></div>
{{!-- Rendered AS: --}}
<div class="class-one class-two"></div>
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.