Lightning コンポーネント開発者ガイド
jコンポーネントのマークアップ
コンポーネントリソースにはマークアップが含まれ、.cmp サフィックスが付いています。マークアップには、テキストまたは他のコンポーネントへの参照を含めることができます。また、マークアップはコンポーネントに関するメタデータの宣言も行います。
まず、helloWorld.cmp コンポーネントのシンプルな「Hello, world!」の例から始めましょう。
1<aura:component>
2 Hello, world!
3</aura:component>この例では、コンポーネントを可能な限りシンプルにしています。テキスト「Hello, world!」は、<aura:component> タグでラップされています。このタグは、すべてのコンポーネント定義の最初と最後にあります。
コンポーネントには、ほとんどの HTML タグを含めることができるため、<div> や <span> などのマークアップを���用できます。HTML5 タグもサポートされています。
1<aura:component>
2 <div class="container">
3 <!--Other HTML tags or components here-->
4 </div>
5</aura:component>コンポーネントを作成するには、開発者コンソールを使用します。
aura:component には次の省略可能な属性があります。
| 属性 | 型 | 説明 |
|---|---|---|
| access | String | コンポーネントが独自の名前空間の外側で使用できるかどうかを示します。使用できる値は、public (デフォルト) と global です。 |
| controller | String | コンポーネントのサーバ側のコントローラクラス。形式は namespace.myController となります。 |
| description | String | コンポーネントの説明。 |
| extends | Component | 拡張するコンポーネント (該当する場合)。たとえば、「extends="ui:input"」などです。 |
| extensible | Boolean | コンポーネントを拡張できる場合は true に設定します。デフォルトは false です。 |
| implements | String | コンポーネントで実装するインターフェースのカンマ区切りのリスト。 |
| isTemplate | Boolean | コンポーネントがテンプレートの場合、true に設定されます。デフォルトは、false です。テンプレートの <aura:component> タグで isTemplate="true" と設定されている必要があります。 |
| template | Component | このコンポーネントのテンプレート。テンプレートは、フレームワークとアプリケーションの読み込みのブートストラップを行います。デフォルトのテンプレートは aura:template です。デフォルトのテンプレートを拡張する独自のコンポーネントを作成して、テンプレートをカスタマイズできます。以下に例を示します。 <aura:component extends="aura:template" ... > |
aura:component には、<aura:attribute> タグで定義された body 属性も含まれます。属性は通常、コンポーネントの出力または動作を制御しますが、システム属性の設定情報は制御しません。
| 属性 | 型 | 説明 |
|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 |