angular-simple-bemというライブラリを作った

ngRepeatばりのオレオレ記法でbemを楽に書けるようにしたライブラリです。
レポジトリ: ukyo/angular-simple-bem

Install and Setup

bower

bower install --save angular-simple-bem

angular.module('your-module', ['angular-simple-bem']);

npm

npm install --save angular-simple-bem

angular.module('your-module', [require('angular-simple-bem')]);

Usage

上: ソース、 下: 展開後

Nest block or element

__fooで親要素のブロックを辿ってネスト。

<div bem="block">
  <div bem="__elem1">
    <div bem="__elem2">nest block or element</div>
  </div>
</div>

<div bem="block" class="block">
  <div bem="__elem1" class="block__elem1">
    <div bem="__elem2" class="block__elem1__elem2">nest block or element</div>
  </div>
</div>

Modifier

いつも通り書けるが、--mod1,mod2のようにカンマ区切りで書ける。

<div bem="block--mod">
  <div bem="__elem--mod1,mod2">modifier</div>
</div>

<div bem="block--mod" class="block block--mod">
  <div bem="__elem--mod1,mod2" class="block__elem block__elem--mod1 block__elem--mod2">modifier</div>
</div>

Modifier with Binding

--key:value形式でvalueがtruthyなときだけmodifier付きクラスを付与。--::でone time binding。

<div ng-init="foo = true; bar = false;">
  <div bem="block--mod1:foo,mod2:bar">modifier with binding</div>
  <div bem="block--::mod1:foo,mod2:bar">modifier with one time binding</div>
</div>

<div ng-init="foo = true; bar = false;">
  <div bem="block--mod1:foo,mod2:bar" class="block block--mod1">modifier with binding</div>
  <div bem="block--::mod1:foo,mod2:bar" class="block block--mod1">modifier with one time binding</div>
</div>

Modifier with Expression

--(foo)でfooをangularのexpressionとして評価。--{key: value}のようにオブジェクト形式なときは括弧省略可。::でone time binding有効になるが、括弧内がどうせangularのexpressionなので--(::foo)でもOK。

<div ng-init="foo = {mod1: true}; bar = true;">
  <div bem="block--(foo)">modifier with expression</div>
  <div bem="block--::{mod2: bar}">modifier with expression(one time binding)</div>
</div>

<div ng-init="foo = {mod1: true}; bar = true;">
  <div bem="block--(foo)" class="block block--mod1">modifier with expression</div>
  <div bem="block--::{mod2: bar}" class="block block--mod2">modifier with expression(one time binding)</div>
</div>

Animation

ngAnimateでいうところの add, removeが使える。詳しくはAngularJS: API: ngAnimateを参照。

License

MIT License