Easily add CSS classes on the <body>, including route names as well as loading and error states.
- Ember.js v2.16 or above
- Ember CLI v2.16 or above
- Node.js v10 or above
ember install ember-body-class
npm run lint:hbsnpm run lint:jsnpm run lint:js -- --fix
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.
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, { });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"]
})You can disable route name classes being added in your environment.js like this.
ENV['ember-body-class'] = {
includeRouteName: false
}See the Contributing guide for details.
This project is licensed under the MIT License.