ember-body-class2
Advanced tools
Easily add CSS classes to the body or rootElement, including route names and loading/error states.
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:
rootElement instead of document.body.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']
});
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.
});
rootElement Instead of document.bodyTo 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
}
This is not recommended. The preference should be to attach a classNames property to each route that needs it. This is for two reasons:
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
};
FAQs
Easily add CSS classes to the body or rootElement, including route names and loading/error states.
We found that ember-body-class2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.