{{class-names}} helper

Provides a cleaner way for conditionally joining class names in templates.

Before:

<button class="button {{if @primary "button--primary"}} {{if @small "button--small"}} {{if @disabled "is-disabled"}}" type="button">
  Submit
</button>

After:

<button
  class={{class-names
    "button"
    button--primary=@primary
    button--small=@small
    is-disabled=@disabled
  }}
  type="button"
>
  Submit
</button>

Or with {{cn}} alias in a single line:

<button
  class={{cn "button" button--primary=@primary button--small=@small is-disabled=@disabled}}
  type="button"
>
  Submit
</button>

Installation

ember install ember-class-names-helper

The helper relies on a tiny and well-tested library classnames.

Usage

<button
  class={{class-names
    "button"
    (if @fancy "bg-white rounded-lg p-6")
    button--primary=@primary
    is-disabled=@disabled
  }}
  type="button"
/>

Or with {{cn}} alias:

<button
  class={{cn "button" is-disabled=@disabled}}
  type="button"
/>

Compatibility

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above
• ember-auto-import v2

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.