Lightning コンポーネント開発者ガイド
jLightning 基本コンポーネントの使用
Lightning 基本コンポーネントは、最新の Lightning Experience、Salesforce アプリケーション、および Lightning Communities ユーザインターフェースを構成するビルディングブロックです。
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 と Salesforce アプリケーションに整合します。
API バージョン列は、コンポーネントを使用するために、開発者コンソールまたは Force.com IDE で、または API を介して 設定する必要がある最小の API バージョンを示します。最小 API バージョンが指定されていないコンポーネントは、API バージョン 37.0 以降で使用できます。
次のコンポーネントの対話型の例は、「コンポーネントライブラリ (ベータ)」を参照してください。
コンテナコンポーネント
次のコンポーネントは、関連情��をまとめてグルーピングします。
| 種別 | Lightning コンポーネント名 | 説明 | Lightning Design System | API バージョン |
|---|---|---|---|---|
| アコーディオン | lightning:accordion | 複数のコンテンツ領域を含むセクションを縦に積み上げたコレクション。同時に展開されるのは 1 つのみです。 | アコーディオン | 41.0 |
| lightning:accordionSection | lightning:accordion コンポーネント内にネストされた 1 つのセクション。 | |||
| カード | lightning:card | 情報の関連グルーピングを囲むコンテナを適用します。 | カード | |
| カルーセル | lightning:carousel | 水平方向に 1 つずつ表示する画像のコレクション。 | カルーセル | 42.0 |
| レイアウト | lightning:layout | ページにコンテナを配置するための反応型グリッドシステム。 | グリッド | |
| lightning:layoutItem | lightning:layout コンポーネント内のコンテナ。 | |||
| タブ | lightning:tab | lightning:tabset コンポーネント内にネストされた 1 つのタブ。 | タブ | |
| lightning:tabset | タブのリストを表します。 | |||
| タイル | lightning:tile | レコードに関連付けられた関連情報のグループ。 | タイル |
入力コントロールコンポーネント
次のコンポーネントは、ボタンに基づきます。
| 種別 | Lightning コンポーネント名 | 説明 | Lightning Design System | API バージョン |
|---|---|---|---|---|
| ボタン | lightning:button | ボタン要素を表します。 | ボタン | |
| ボタンアイコン | lightning:buttonIcon | アイコンのみの HTML ボタン。 | ボタンアイコン | |
| ボタンアイコン (ステートフル) | lightning:buttonIconStateful | 状態を保持するアイコンのみのボタンです。 | ボタンアイコン | 41.0 |
| ボタングループ | lightning:buttonGroup | ボタンのグループを表します。 | ボタングループ | |
| ボタンメニュー | lightning:buttonMenu | アクションまたは関数のリストを含むドロップダウンメニュー。 | メニュー | |
| lightning:menuItem | lightning:buttonMenu のリスト項目。 | |||
| ボタンステートフル | lightning:buttonStateful | 状態を切り替えるボタン。 | ボタンステートフル |
ナビゲーションコンポーネント
次のコンポーネントは、ボタンに基づきます。
| 種別 | Lightning コンポーネント名 | 説明 | Lightning Design System | API バージョン |
|---|---|---|---|---|
| ブレッドクラム | lightning:breadcrumb | ユーザが表示しているページの階層パス内の項目。 | Breadcrumbs | |
| lightning:breadcrumbs | Web サイトまたはアプリケーション内で現在アクセスしているページの階層パス。 | |||
| ツリー | lightning:tree | ネストされた項目の階層構造を表示します。 | ツリー | 41.0 |
| ボタンメニュー | lightning:buttonMenu | アクションまたは関数のリストを含むドロップダウンメニュー。 | メニュー | |
| lightning:menuItem | lightning:buttonMenu のリスト項目。 | |||
| 垂直ナビゲーション | lightning:verticalNavigation | 別のページまたは現在のページの別の部分に移動するための垂直型のリンクリスト。 | 垂直ナビゲーション | 41.0 |
| 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 | API バージョン |
|---|---|---|---|---|
| アバター | lightning:avatar | オブジェクトのビジュアル表現。 | アバター | |
| バッジ | lightning:badge | 少量の情報を保持する表示ラベル。 | バッジ | |
| データテーブル | lightning:datatable | 型に応じて書式設定されたデータの列を表示するテーブルです。 | データテーブル | 41.0 |
| 動的アイコン | lightning:dynamicIcon | さまざまなアニメーションアイコン。 | 動的アイコン | 41.0 |
| ヘルプテキスト (ツールチップ) | lightning:helptext | 少量のテキストのポップオーバーコンテナ付きアイコン。 | ツールチップ | |
| アイコン | lightning:icon | コンテキストを提供するビジュアル要素。 | アイコン | |
| リストビュー | lightning:listView | 指定されたオブジェクトのリストビューを表示します。 | なし | 42.0 |
| パス | lightning:path | 選択リスト項目とパス設定メタデータによって決定されるパスを表示します。 | パス | 41.0 |
| 選択リストパス | lightning:picklistPath | 指定された選択リスト項目に基づくパスを表示します。 | ||
| ピル | lightning:pill | ピルとは、ユーザが生成する自由形式のテキストではない、データベース内の既存の項目を表します。 | ピル | |
| ピルコンテナ | lightning:pillContainer | コンテナ内でグループ化されたピルのリスト。 | ピル | 42.0 |
| 進行状況バー | lightning:progressBar | 操作の進行状況を示す、左から右の水平方向の進行状況バー。 | 進行状況バー | 41.0 |
| 進行状況インジケータとパス | lightning:progressIndicator | 完了している内容を示す処理のステップを表示します。 | 進行状況インジケータ | 41.0 |
| ツリーグリッド | lightning:treeGrid | テーブルに表示されるデータの階層ビュー。 | ツリー | 42.0 |
| スピナー | lightning:spinner | アニメーションスピナーを表示します。 | スピナー |
項目コンポーネント
次のコンポーネントは、フォームへの値の入力を有効にします。
| 種別 | Lightning コンポーネント名 | 説明 | Lightning Design System | API バージョン |
|---|---|---|---|---|
| 住所 | lightning:inputAddress | 住所複合項目を表します。 | ��ォームレイアウト | 42.0 |
| チェックボックスグループ | lightning:checkboxGroup | オプションのグループの単一または複数の選択を有効にします。 | チェックボックス | 41.0 |
| コンボボックス | lightning:combobox | オプションのリストから単一の選択を有効にする入力要素。 | コンボボックス | |
| デュアルリストボックス | lightning:dualListbox | 選択可能なオプションのリストボックスを含む入力リストボックスを提供します。2 つのリスト間でオプションを移動できます。 | デュエル選択リスト | 41.0 |
| ファイルアップローダおよびプレビュー | lightning:fileUpload | レコードへのファイルのアップロードを有効にします。 | ファイルセレクタ | 41.0 |
| lightning:fileCard | アップロードされたコンテンツの表現を表示します。 | 項目 | ||
| 入力 | lightning:input | type 属性に応じてユーザ入力を受け入れる対話型コントロールを表します。 | 入力 | |
| 入力項目 | lightning:inputField | Salesforce オブジェクトの項目に対応する編集可能な入力を表します。 | フォームレイアウト | 42.0 |
| 入力名 | lightning:inputName | 名前複合項目を表します。 | フォームレイアウト | 42.0 |
| 入力位置 (地理位置情報) | lightning:inputLocation | 緯度値と経度値を受け入れる地理位置情報の複合項目。 | フォームレイアウト | 41.0 |
| ラジオグループ | lightning:radioGroup | オプションのグループの単一の選択を有効にします。 | ラジオボタン | 41.0 |
| 選択 | lightning:select | HTML select 要素を作成します。 | 選択 | |
| スライダ | lightning:slider | 指定した 2 つの数字間の値を指定するための入力範囲スライダ。 | スライダ | 41.0 |
| リッチテキストエリア | lightning:inputRichText | カスタマイズ可能なツールバーを備えた、リッチテキスト入力用の WYSIWYG エディタ。 | リッチテキストエディタ | |
| テキストエリア | lightning:textArea | 複数行のテキスト入力。 | TextArea |
書式設定済みコンポーネント
次のコンポーネントは、参照のみの書式設定済みの値を表示できるようにします。
| 種別 | Lightning コンポーネント名 | 説明 | Lightning Design System | API バージョン |
|---|---|---|---|---|
| Address | lightning:formattedAddress | Google マップ上の特定の場所へのリンクを提供する、書式設定された住所を表示します。 | なし | 42.0 |
| 日付/時間 | lightning:formattedDateTime | 書式設定された日付と時刻を表示します。 | ||
| メール | lightning:formattedEmail | mailto: URL スキームが付いているハイパーリンクとしてメールを表示します。 | 41.0 | |
| 地理位置情報 | lightning:formattedLocation | 緯度, 経度の形式を使用して地理位置情報を表示します。 | 41.0 | |
| 名前 | lightning:formattedName | 敬称とサフィックスを含めることができる、書式設定された名前を表示します。 | 42.0 | |
| 数値 | lightning:formattedNumber | 書式設定された数値を表示します。 | ||
| 出力項目 | lightning:outputField | Salesforce オブジェクトの項目の表示ラベル、ヘルプテキスト、値を表示します。 | 41.0 | |
| 電話 | lightning:formattedPhone | tel: URL スキームが付いているハイパーリンクとして電話番号を表示します。 | 41.0 | |
| リッチテキスト | lightning:formattedRichText | ホワイトリストに登録されているタグと属性を使用して書式設定されたリッチテキストを表示します。 | 41.0 | |
| テキスト | lightning:formattedText | テキストを表示し、改行を禁則処理で置き換え、要求された場合は linkify で表示します。 | 41.0 | |
| 時間 | lightning:formattedTime | ユーザのロケールに基づいて書式設定された時間を表示します。 | 42.0 | |
| URL | lightning:formattedUrl | URL をハイパーリンクとして表示します。 | 41.0 | |
| 相対日付/時間 | lightning:relativeDateTime | ソースの日時と指定された日時の相対的な時差を表示します。 |
機能固有のコンポーネント
次のコンポーネントは、特定の Salesforce 機能のコンテキストでのみ使用できます。
| 種別 | Lightning コンポーネント名 | 説明 | Lightning Design System | API バージョン |
|---|---|---|---|---|
| Lightning ページ範囲 | lightning:flexipageRegionInfo | 上位のコンポーネントに Lightning ページ範囲の情報を提供します。 | なし | 41.0 |
| フローインタビュー | lightning:flow | Lightning ランタイムでのフローインタビューを表します。 | 41.0 | |
| オムニチャネルツールキット | lightning:omniToolkitAPI | オムニチャネルツールキットのメソッドへの API アクセスを提供します。 | 41.0 | |
| Lightning コンソールユーティリティバー | lightning:utilityBarAPI | Lightning コンソールのユーティリティバーのメソッドへの API アクセスを提供します。 | 41.0 | |
| Lightning コンソールワークスペース | lightning:workspaceAPI | Lightning コンソールのワークスペースのメソッドへの API アクセスを提供します。 | 41.0 | |
| Snap-in チャット | lightningsnapin:prechatAPI | 事前チャットページのユーザインターフェースのカスタマイズを有効にします。 | 42.0 |