Lightning コンポーネント開発者ガイド
jLightning 基本コンポーネントの使用
Lightning 基本コンポーネントには Lightning Design System のマークアップとクラスが組み込まれており、最小のフットプリントでパフォーマンスとアクセシビリティの向上を提供します。
これらの基本コンポーネントは、HTML と CSS の詳細を処理します。各コンポーネントには、さまざまなスタイル設定を可能にする簡単な属性が用意されています。つまり、通常は CSS を使用する必要はまったくありません。Lightning 基本コンポーネント属性の簡素化と、その属性の無駄がなく一貫性のある定義によって属性が使いやすくなり、ビジネスロジックに集中できます。
Lightning 基本コンポーネントを lightning 名前空間で検索し、既存の ui 名前空間コンポーネントを補完できます。一致する ui と lightning 名前空間コンポーネントがあるインスタンスでは、lightning 名前空間コンポーネントを使用することをお勧めします。lightning 名前空間コンポーネントは、一般的な使用事例に合うように最適化されています。Lightning Design System のスタイル設定が装備されているコンポーネントの範囲を超えると、アクセシビリティ、リアルタイム操作、および拡張エラーメッセージが処理されます。
後続のリリースでは、追加の Lightning 基本コンポーネントを提供していく予定です。今後 lightning 名前空間が ui 名前空間と同等になり、やがてそれを超えることが想定されています。
また、Lightning 基本コンポーネントは時間と共に Lightning Design System に合わせて進化していきます。そのため、カスタマイズは引き続き Lightning Experience と Salesforce1 に整合します。
すべての使用できるコンポーネントについては、https://<myDomain>.lightning.force.com/auradocs/reference.app (<myDomain> は、Salesforce カスタムドメインの名前) のコンポーネントの参照、または「コンポーネントの参照」セクションを参照してください。
コンテナコンポーネント
次のコンポーネントは、関連情報をまとめてグルーピングします。
| 型 | Lightning コンポーネント名 | 説明 | Lightning Design System |
|---|---|---|---|
| アコーディオン | lightning:accordion | 複数のコンテンツ領域を含むセクションを縦に積み上げたコレクション。同時に展開されるのは 1 つのみです。 | アコーディオン |
| lightning:accordionSection | lightning:accordion コンポーネント内にネストされた 1 つのセクション。 | ||
| カード | lightning:card | 情報の関連グルーピングを囲むコンテナを適用します。 | カード |
| レイアウト | lightning:layout | ページにコンテナを配置するための反応型グリッドシステム。 | グリッド |
| lightning:layoutItem | lightning:layout コンポーネント内のコンテナ。 | ||
| タブ | lightning:tab | lightning:tabset コンポーネント内にネストされた 1 つのタブ。 | タブ |
| lightning:tabset | タブのリストを表します。 | ||
| タイル | lightning:tile | レコードに関連付けられた関連情報のグループ。 | タイル |
入力コントロールコンポーネント
次のコンポーネントは、ボタンに基づきます。
| 型 | Lightning コンポーネント名 | 説明 | Lightning Design System |
|---|---|---|---|
| ボタン | lightning:button | ボタン要素を表します。 | ボタン |
| ボタンアイコン | lightning:buttonIcon | アイコンのみの HTML ボタン。 | ボタンアイコン |
| ボタンアイコン (ステートフル) | lightning:buttonIconStateful | 状態を保持するアイコンのみのボタンです。 | ボタンアイコン |
| ボタングループ | lightning:buttonGroup | ボタンのグループを表します。 | ボタングループ |
| ボタンメニュー | lightning:buttonMenu | アクションまたは関数のリストを含むドロップダウンメニュー。 | メニュー |
| lightning:menuItem | lightning:buttonMenu のリスト項目。 | ||
| ボタンステートフル | lightning:buttonStateful | 状態を切り替えるボタン。 | ボタンステートフル |
ナビゲーションコンポーネント
次のコンポーネントは、ボタンに基づきます。
| 型 | Lightning コンポーネント名 | 説明 | Lightning Design System |
|---|---|---|---|
| ブレッドクラム | lightning:breadcrumb | ユーザが表示しているページの階層パス内の項目。 | Breadcrumbs |
| lightning:breadcrumbs | Web サイトまたはアプリケーション内で現在アクセスしているページの階層パス。 | ||
| ツリー | lightning:tree | ネストされた項目の階層構造を表示します。 | ツリー |
| ボタンメニュー | lightning:buttonMenu | アクションまたは関数のリストを含むドロップダウンメニュー。 | メニュー |
| lightning:menuItem | lightning:buttonMenu のリスト項目。 | ||
| 垂直ナビゲーション | lightning:verticalNavigation | 別のページまたは現在のページの別の部分に移動するための垂直型のリンクリスト。 | 垂直ナビゲーション |
| lightning:verticalNavigationItem | lightning:verticalNavigationSection または lightning:verticalNavigationOverflow 内のテキストのみのリンク。 | ||
| lightning:verticalNavigationItemBadge | lightning:verticalNavigationSection または lightning:verticalNavigationOverflow 内のリンクとバッジ。 | ||
| lightning:verticalNavigationItemIcon | lightning:verticalNavigationSection または lightning:verticalNavigationOverflow 内のリンクとアイコン。 | ||
| lightning:verticalNavigationOverflow | lightning:verticalNavigation の項目のオーバーフロー。 | ||
| lightning:verticalNavigationSection | lightning:verticalNavigation 内のセクション。 |
ビジュアルコンポーネント
次のコンポーネントは、たとえばアイコンや読み込みスピナーなどの情報キューを提供します。
| 型 | Lightning コンポーネント名 | 説明 | Lightning Design System |
|---|---|---|---|
| アバター | lightning:avatar | オブジェクトのビジュアル表現。 | アバター |
| バッジ | lightning:badge | 少量の情報を保持する表示ラベル。 | バッジ |
| データテーブル | lightning:datatable | 型に応じて書式設定されたデータの列を表示するテーブルです。 | |
| 動的アイコン | lightning:dynamicIcon | さまざまなアニメーションアイコン。 | 動的アイコン |
| ヘルプテキスト (ツールチップ) | lightning:helptext | 少量のテキストのポップオーバーコンテナ付きアイコン。 | ツールチップ |
| アイコン | lightning:icon | コンテキストを提供するビジュアル要素。 | アイコン |
| ピル | lightning:pill | ピルとは、ユーザが生成する自由形式のテキストではない、データベース内の既存の項目を表します。 | ピル |
| 進行状況バー | lightning:progressBar | 操作の進行状況を示す、左から右の水平方向の進行状況バー。 | 進行状況バー |
| 進行状況インジケータとパス | lightning:progressIndicator | 完了している内容を示す処理のステップを表示します。 | 進行状況インジケータ |
| スピナー | lightning:spinner | アニメーションスピナーを表示します。 | スピナー |
項目コンポーネント
次のコンポーネントは、値の入力を有効にします。
| 型 | Lightning コンポーネント名 | 説明 | Lightning Design System |
|---|---|---|---|
| チェックボックスグループ | lightning:checkboxGroup | オプションのグループの単一または複数の選択を有効にします。 | チェックボックス |
| コンボボックス | lightning:combobox | オプションのリストから単一の選択を有効にする入力要素。 | コンボボックス |
| デュアルリストボックス | lightning:dualListbox | 選択可能なオプションのリストボックスを含む入力リストボックスを提供します。2 つのリスト間でオプションを移動できます。 | デュエル選択リスト |
| ファイルアップローダおよびプレビュー | lightning:fileUpload | レコードへのファイルのアップロードを有効にします。 | ファイルセレクタ |
| 入力 | lightning:input | type 属性に応じてユーザ入力を受け入れる対話型コントロールを表します。 | 入力 |
| 入力位置 (地理位置情報) | lightning:inputLocation | 緯度値と経度値を受け入れる地理位置情報の複合項目。 | N/A |
| ラジオグループ | lightning:radioGroup | オプションのグループの単一の選択を有効にします。 | ラジオボタン |
| 選択 | lightning:select | HTML select 要素を作成します。 | 選択 |
| スライダ | lightning:slider | 指定した 2 つの数字間の値を指定するための入力範囲スライダ。 | スライダ |
| リッチテキストエリア | lightning:inputRichText | カスタマイズ可能なツールバーを備えた、リッチテキスト入力用の WYSIWYG エディタ。 | リッチテキストエディタ |
| テキストエリア | lightning:textArea | 複数行のテキスト入力。 | TextArea |
書式設定済みコンポーネント
���のコンポーネントは、参照のみの書式設定済みの値を表示できるようにします。
| 型 | Lightning コンポーネント名 | 説明 | Lightning Design System |
|---|---|---|---|
| 日付/時間 | lightning:formattedDateTime | 書式設定された日付と時刻を表示します。 | なし |
| メール | lightning:formattedEmail | mailto: URL スキームが付いているハイパーリンクとしてメールを表示します。 | |
| 地理位置情報 | lightning:formattedLocation | 緯度, 経度の形式を使用して地理位置情報を表示します。 | |
| 数値 | lightning:formattedNumber | 書式設定された数値を表示します。 | |
| 電話 | lightning:formattedPhone | tel: URL スキームが付いているハイパーリンクとして電話番号を表示します。 | |
| リッチテキスト | lightning:formattedRichText | ホワイトリストに登録されているタグと属性を使用して書式設定されたリッチテキストを表示します。 | |
| テキスト | lightning:formattedText | テキストを表示し、改行を禁則処理で置き換え、要求された場合は linkify で表示します。 | |
| URL | lightning:formattedUrl | URL をハイパーリンクとして表示します。 | |
| 相対日付/時間 | lightning:relativeDateTime | ソースの日時と指定された日時の相対的な時差を表示します。 |