ember-body-class
v3.0.0
Published
Easily add CSS classes to the body, including route names and loading/error states.
Downloads
9,674
Maintainers
real_ateReadme
ember-body-class
Easily add CSS classes on the <body>, including route names as well as loading and error states.
Compatibility
- Ember.js v2.16 or above
- Ember CLI v2.16 or above
- Node.js v10 or above
Installation
ember install ember-body-class
Usage
npm run lint:hbsnpm run lint:jsnpm run lint:js -- --fix
Route name classes
By default, all of your routes will include CSS class names. This works for the
whole hierarchy, so if you have a route nested at application/dashboard/stats,
then you'll end up with application, dashboard, stats, application-dashboard and application-dashboard-stats classes.
To disable this, see options below.
Loading & Error classes
Adding the loading and error classes requires you to include a mixin in your
application route. Include it like this:
import Ember from 'ember';
import BodyClassMixin from 'ember-body-class/mixins/body-class';
export default Ember.Route.extend(BodyClassMixin, { });Custom classes
All routes have a classNames attribute of type Array. If you wanted to add a
class strawberry-jam to your route, it would look like this:
export default Ember.Route.extend({
classNames: ["strawberry-jam"]
})Options
You can disable route name classes being added in your environment.js like this.
ENV['ember-body-class'] = {
includeRouteName: false
}Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.