Class Ember.ClassNamesSupport

classNameBindings public

Defined in packages/@ember/-internals/views/lib/mixins/class_names_support.ts:48

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.

1
2
3
4
5
6

// 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.

1
2
3
4
5
6

// 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:

1
2
3
4
5
6

// 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:

1
2
3
4
5
6

// 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.

classNames public

Defined in packages/@ember/-internals/views/lib/mixins/class_names_support.ts:36

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.