Class Ember.ClassNamesSupport private

A list of properties of the view to apply as class names. If the property is a string value, the value of that string will be applied as a class name.

// Applies the 'high' class to the view element
import Component from '@ember/component';
Component.extend({
  classNameBindings: ['priority'],
  priority: 'high'
});

If the value of the property is a Boolean, the name of that property is added as a dasherized class name.

// Applies the 'is-urgent' class to the view element
import Component from '@ember/component';
Component.extend({
  classNameBindings: ['isUrgent'],
  isUrgent: true
});

If you would prefer to use a custom value instead of the dasherized property name, you can pass a binding like this:

// Applies the 'urgent' class to the view element
import Component from '@ember/component';
Component.extend({
  classNameBindings: ['isUrgent:urgent'],
  isUrgent: true
});

If you would like to specify a class that should only be added when the property is false, you can declare a binding like this:

// Applies the 'disabled' class to the view element
import Component from '@ember/component';
Component.extend({
  classNameBindings: ['isEnabled::disabled'],
  isEnabled: false
});

This list of properties is inherited from the component's superclasses as well.

Standard CSS class names to apply to the view's outer element. This property automatically inherits any class names defined by the view's superclasses as well.