BEM helpers for Ember.js applications
npm install ember-bem-helpersThis addon provides BEM helpers for Ember.js applications.
This addon produces BEM classes based on Two Dashes style.
No mixins, no code in the component js/ts file needed. Works with template-only components.
- Ember.js v5.8 or above
- Embroider or ember-auto-import v2
```
ember install ember-bem-helpers
This addon provides two helpers out of the box: block-name and bem.
Usually you are supposed to use block-name once per component, on the top level of the component. However, nested usage is also supported.
Use bem helper everywhere you need to get a BEM class.
Here is a basic example:
`hbs
{{block-name "my-button"}}
class={{bem disabled=@isDisabled}}
disabled={{@isDisabled}}
type="button"
>
{{@label}}
`
You can pass a variable to the block-name helper like this:
`hbs`
{{block-name @externalBlockName}}
Modifiers are not run in FastBoot and you probably want your elements to have proper classes in a server-side rendered HTML.
This addon provides AST plugin which transforms block-name (which is actually not a real helper) to the {{#let}}{{/let}} block with blockName variable and injects it as the first argument to every bem helper usage.
So, the above basic example is transformed to the following:
`hbs``
{{#let "my-button" as |blockName|}}
class={{bem blockName disabled=@isDisabled}}
disabled={{@isDisabled}}
type="button"
>
{{@label}}
{{/let}}
See the Contributing guide for details.
This addon is based on the great addon ember-cli-bem by Nikita Gusarov.
This project is licensed under the MIT License.