#

API Docs for: v2.11.1
Show: Inherited Protected Private Deprecated

# File: packages/ember-views/lib/mixins/class_names_support.js

    /**
    @module ember
    @submodule ember-views
    */

    import {
      assert,
      Mixin
    } from 'ember-metal';

    const EMPTY_ARRAY = Object.freeze([]);

    /**
      @class ClassNamesSupport
      @namespace Ember
      @private
    */
    export default Mixin.create({
      concatenatedProperties: ['classNames', 'classNameBindings'],

      init() {
        this._super(...arguments);

        assert(`Only arrays are allowed for 'classNameBindings'`, Array.isArray(this.classNameBindings));
        assert(`Only arrays of static class strings are allowed for 'classNames'. For dynamic classes, use 'classNameBindings'.`, Array.isArray(this.classNames));
      },

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

        @property classNames
        @type Array
        @default ['ember-view']
        @public
      */
      classNames: EMPTY_ARRAY,

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

        ```javascript
        // Applies the 'high' class to the view element
        Ember.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.

        ```javascript
        // Applies the 'is-urgent' class to the view element
        Ember.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:

        ```javascript
        // Applies the 'urgent' class to the view element
        Ember.Component.extend({
          classNameBindings: ['isUrgent:urgent'],
          isUrgent: true
        });
        ```

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

        @property classNameBindings
        @type Array
        @default []
        @public
      */
      classNameBindings: EMPTY_ARRAY
    });