Lightning コンポーネント開発者ガイド
jコンポーネントのドキュメントの提供
コンポーネントのドキュメントは、作成したコンポーネントを他のユーザが理解し、使用するのに役立ちます。
次の 2 種類のコンポーネント参照ドキュメントを提供できます。
- ドキュメント定義 (DocDef): 説明、サンプルコード、例への参照などを含む、コンポーネントの詳細なドキュメント。DocDef は、幅広い HTML マークアップをサポートし、コンポーネントの概要と機能を説明するのに役立ちます。
- インライン説明: テキストのみの説明。通常は 1 文か 2 文で、タグ内の description 属性で設定します。
DocDef を入力するには、開発者コンソールのコンポーネントサイドバーにある [DOCUMENTATION] をクリックします。次の例では、np:myComponent の DocDef を示します。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:documentation>
18
19 <aura:description>
20
21 <p>An <code>np:myComponent</code> component represents an element that executes an action defined by a controller.</p>
22
23 <!--More markup here, such as <pre> for code samples-->
24
25 </aura:description>
26
27 <aura:example name="myComponentExample" ref="np:myComponentExample" label="Using the np:myComponent Component">
28
29 <p>This example shows a simple setup of <code>myComponent</code>.</p>
30
31 </aura:example>
32
33 <aura:example name="mySecondExample" ref="np:mySecondExample" label="Customizing the np:myComponent Component">
34
35 <p>This example shows how you can customize <code>myComponent</code>.</p>
36
37 </aura:example>
38
39</aura:documentation>ドキュメント定義には次のタグが含まれます。
| タグ | 説明 |
|---|---|
| <aura:documentation> | DocDef の最上位定義 |
| <aura:description> | 幅広い HTML マークアップを使用してコンポーネントを記述します。説明にコードサンプルを含めるには、コードブロックとして表示される <pre> タグを使用します。<pre> タグに入力するコードはエスケープされる必要があります。たとえば、<aura:component> と入力して <aura:component> をエスケープします。 |
| <aura:example> | コンポーネントの使用方法を示す例を参照します。幅広い HTML マークアップをサポートし、視覚的な出力とコンポーネントのソース例の前にテキストとして表示されます。例は、インタラクティブな出力として表示されます。例は複数作成できます。例は、個々の <aura:example> タグでラップする必要があります。
|
コンポーネント例の提供
DocDef にはコンポーネント例への参照が含まれます。コンポーネント例は、aura:example を使用して結び付けられると、コンポーネント参照ドキュメント内にインタラクティブなデモとして表示されます。
1<aura:example name="myComponentExample" ref="np:myComponentExample" label="Using the np:myComponent Component">np:myComponent の使用方法を示すコンポーネント例を次に示します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--The np:myComponentExample example component-->
18
19<aura:component>
20
21 <np:myComponent>
22
23 <aura:set attribute=”myAttribute”>This sets the attribute on the np:myComponent component.</aura:set>
24
25 <!--More markup that demonstrates the usage of np:myComponent-->
26
27 </np:myComponent>
28
29</aura:component>
30
31 インライン説明の提供
インライン説明は、要素の短い概要を提供します。インライン説明では HTML マークアップはサポートされていません。description 属性を介するインライン説明が、次のタグでサポートされています。
| タグ | 例 |
|---|---|
| <aura:component> | <aura:component description="Represents a button element"> |
| <aura:attribute> | <aura:attribute name="langLocale" type="String" description="The language locale used to format date value."/> |
| <aura:event> | <aura:event type="COMPONENT" description="Indicates that a keyboard key has been pressed and released"/> |
| <aura:interface> | <aura:interface description="A common interface for date components"/> |
| <aura:registerEvent> | <aura:registerEvent name="keydown" type="ui:keydown" description="Indicates that a key is pressed"/> |
ドキュメントの表示
作成したドキュメントは、https://<mySalesforceInstance>.lightning.force.com/auradocs/reference.app (<mySalesforceInstance> は、na1 など、組織をホストするインスタンスの名前です) で表示できます。