Emberjs-comp-cust-ele-class

EmberJS-要素のクラスのカスタマイズ

呼び出し時、つまりクラス名の呼び出し時に要素のクラスをカスタマイズします。

構文

import Ember from 'ember';

export default Ember.Component.extend ({
   classNames: ['name_of_class']
});

例

以下の例では、呼び出し時に要素のクラスをカスタマイズすることを指定しています。 _post-action_という名前のコンポーネントを作成します。これは、_app/components/_の下で定義されます。

_post-action.js_ファイルを開き、次のコードを追加します-

import Ember from 'ember';

export default Ember.Component.extend ({
   classNameBindings: ['isUrgent'],
   isUrgent: true,
});

次のコード行でコンポーネントテンプレートファイル_post-action.hbs_を開きます-

<div class = "ember-view is-urgent">Welcome to finddevguides...</div>
{{yield}}

_index.hbs_ファイルを開き、次のコード行を追加します-

{{post-action}}
{{outlet}}

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsコンポーネントエレメントのクラスのカスタマイズ