8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?