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
rootElement
instead 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:
; ;
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;; ;
rootElement
Instead of document.body
Use To use your configured rootElement
instead of document.body
add the following to the application configuration.
// app/config/environment.jsENV'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;; { Route;} initialize;