❤
npm
Sign UpSign In

ember-body-class2

2.1.1 • Public • Published

npm version Travis CI

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 of document.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
};

Readme

Keywords

Package Sidebar

Install

npm i ember-body-class2

Repository

github.com/nathanhammond/ember-body-class

Homepage

github.com/nathanhammond/ember-body-class

Weekly Downloads

2

Version

2.1.1

License

MIT

Unpacked Size

12.7 kB

Total Files

15

Last publish

Collaborators

  • nathanhammond
Try on RunKit
Report malware