コンポーネントのドキュメントの提供
コンポーネント、イベント、またはインターフェースは、ルート定義とも呼ばれます。
ドキュメントの表示
ルート定義を access="global" とマークすると、組織内のコンポーネントラ��ブラリに表示されます。自分が所有する管理パッケージや名前空間では、access="global" または access="public" (デフォルト) とマークされているコンポーネントがコンポーネントライブラリに表示されます。各ルート定義ページには、最大 3 つのタブを次の順序で表示できます。
- 例
- .auradoc ファイルで <aura:example> で指定されたインタラクティブな例を表示します。結び付けられている例が .auradoc ファイルに存在しない場合は、このタブは非表示となります。下記の「コンポーネント例の提供」のセクションを参照してください。
- ドキュメント
- .auradoc ファイルの内容を表示します。ルート定義に .auradoc ファイルが存在しない場合は、このタブは非表示となります。下記の「ドキュメントの作成」のセクションを参照してください。
- 仕様
- ルート定義、属性、およびメソッドの説明を表示します。自分が所有する管理パッケージや名前空間では、access="global" または access="public" (デフォルト) とマークされている属性とメソッドが表示されます。下記の「インライン説明の提供」のセクションを参照してください。
ドキュメントの作成
ルート定義の主要なドキュメントは、ルート定義ページの [ドキュメント] タブに表示されます。例: https://developer.salesforce.com/docs/component-library/bundle/lightning:avatar/documentation
コンテンツを HTML マークアップで記述子、コンポーネントの概要と機能を説明します。開発者がコンポーネント、イベント、またはインターフェースを簡単に使えるように、コード例も追加してください。
ドキュメントを提供するには、開発者コンソールのコンポーネントサイドバーにある [DOCUMENTATION] をクリックして .auradoc ファイルを作成します。次の例は、avatar.auradoc のコンテンツを表示しています。
.auradoc ファイルには次のタグが含まれます。
| タグ | 説明 |
|---|---|
| <aura:documentation> | 必須。DocDef の最上位定義 |
| <aura:description> | 必須。HTML マークアップを使用してコンポーネントを記述します。説明にコードサンプルを含めるには、コードブロックとして表示される <pre> タグを使用します。<pre> タグに入力するコードはエスケープされる必要があります。たとえば、<aura:component> と入力して <aura:component> をエスケープします。 |
| <aura:example> | 省略可能。コンポーネントの使用方法を示す例を参照します。HTML マークアップをサポートし、視覚的な出力とコンポーネントのソース例の前にテキストとして表示されます。例は、インタラクティブな出力として表示されます。例は複数作成できます。例は、個々の <aura:example> タグでラップする必要があります。
|
コンポーネント例の提供
コンポーネント例が aura:example を使用して結び付けられると、ルート定義ページの [例] タブにインタラクティブなデモとして表示されます。
1<aura:example name="exampleAvatarBasic" ref="lightningcomponentdemo:exampleAvatarBasic" label="Basic Avatar">
2 <p>The following example creates an avatar with the default size and variant. The initials "BW" is displayed if the image path denoted by the <code>src</code> attribute is invalid or fails to load for any reason, such as when the user is offline.</p>
3 </aura:example>lightning:avatar の使い方を示すコンポーネント例を次に示します。
.auradoc ファイルでサポートされる HTML タグ
ドキュメントでは以下のタグの使用をお勧めします。
- <a>—リンク
- <p>—段落
- <ul>—箇条書き
- <ol>—番号付きリスト
- <li>—箇条書きまたは番号付きリスト内の項目
- <code>—コードフォーマット
- <pre>—コードブロック
- <h4>—セクション見出し
- <table>—データの行と列があるテーブル
インライン説明の提供
インライン説明は、要素の短い概要を提供します。インライン説明では HTML マークアップはサポートされていません。description 属性を介するインライン説明が、次のタグでサポートされています。
| タグ | 例 |
|---|---|
| <aura:component> | <aura:component description="Represents a button element"> |
| <aura:attribute> | <aura:attribute name="label" type="String" description="The text to be displayed inside the button."/> |
| <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:method> |
|
| <aura:registerEvent> | <aura:registerEvent name="keydown" type="ui:keydown" description="Indicates that a key is pressed"/> |