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