包详细信息

ember-body-class

mansona12.8kMIT3.0.0

Easily add CSS classes to the body, including route names and loading/error states.

ember-addon, ember, ember-cli, CSS

自述文件

npm version Travis CI

ember-body-class

Easily add CSS classes on the <body>, including route names as well as loading and error states.

Compatibility

  • Ember.js v2.16 or above
  • Ember CLI v2.16 or above
  • Node.js v10 or above

Installation

ember install ember-body-class

Usage

  • npm run lint:hbs
  • npm run lint:js
  • npm run lint:js -- --fix

Route name classes

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.

Loading & Error classes

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, { });

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:

export default Ember.Route.extend({
  classNames: ["strawberry-jam"]
})

Options

You can disable route name classes being added in your environment.js like this.

ENV['ember-body-class'] = {
  includeRouteName: false
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

更新日志

3.0.0 / 2022-06-20

  • update ember-auto-import to support Ember 4.x #59 from @mansona
  • Update Ember to 3.28 with ember-cli-update #51 from @mansona
  • remove router deprecation #57 from @mansona
  • Breaking: drop support for Ember < 3.8 #58 from @mansona
  • Breaking: drop support for node < 14 #52 from @mansona

2.1.1 / 2021-12-05

  • fix ember-body-class for fastboot initial render #45 from @mansona

2.1.0 / 2021-11-23

  • Update ember-get-config #44 from @mansona

2.0.0 / 2020-11-05

  • BREAKING: Update dependencies #39 from @mansona
  • move to github CI #40 from @mansona

There has been no change to the API in this release, we have just dropped Node 6 and Node 8 from our testing matrix. It will likely still work but we are no longer checking.

1.1.4 / 2019-10-18

  • Remove Object.freeze to fix IE11 #31 from @ctjhoa
  • Updating dependencies to fix tests #28 from @ctjhoa

1.1.3 / 2018-11-16

  • fixing deprecation on error route from @mansona

1.1.2 / 2018-11-16

  • adding tests and removed deprecation for ember-routing.route-router #26 from @mansona

1.1.1 / 2018-11-16

  • fixing loading class on body from @mansona

1.1.0 / 2018-10-30

  • Enable ability to dynamically update the body classNames #9 from @ashrafhasson