ember-body-class2
v2.1.1
Published
Easily add CSS classes to the body or rootElement, including route names and loading/error states.
Downloads
6
Maintainers
nathanhammondReadme
ember-body-class2
Easily add CSS classes on the <body> or rootElement, including route names as well as loading and error states.
npm install --save ember-body-class2
This is a fork of ember-body-class. Differences:
- It removes API surface in favor of moving to a declarative pattern. This reduces the likelihood of class naming collisions.
- It does not branch for FastBoot.
- It also addresses bugs which have remained unadressed in the original.
- It allows specifying to use
rootElementinstead ofdocument.body.
Usage
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:
import Route from '@ember/routing/route';
export default Route.extend({
classNames: ['strawberry-jam']
});Loading & Error Classes
Adding the loading and error classes requires you to include a mixin in your
application route. Include it like this:
// app/routes/application.js
import Route from '@ember/routing/route';
import BodyClassMixin from 'ember-body-class/mixins/body-class';
export default Route.extend(BodyClassMixin, {
// Add any other customizations you may have here.
});Use rootElement Instead of document.body
To use your configured rootElement instead of document.body add the following to the application configuration.
// app/config/environment.js
ENV['ember-body-class'] = {
useRootElement: true
}Add Class Name to Each Route
This is not recommended. The preference should be to attach a classNames property to each route that needs it. This is for two reasons:
- Routes may have the same names, making it not a unique identifier.
- If you relocate your route, the class name could change, resulting in unexpected CSS output changes.
Selecting your own class name on a per-route basis sidesteps both of these concerns. However, since that is still possibly a need in applications, here is an example of how it could be done:
// app/initializers/route-class-name.js
import Route from '@ember/routing/route';
import { computed } from '@ember/object';
export function initialize() {
Route.reopen({
classNames: computed(function() {
const routeName = this.get('routeName');
if (routeName === 'application') {
return;
}
return [routeName.replace(/\./g, '-')];
})
});
}
export default {
initialize
};