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:button | ボタン要素を表します。 |
| ボタンアイコン | lightning:buttonIcon | アイコンのみの HTML ボタン。 |
| ボタングループ | lightning:buttonGroup | ボタンのグループを表します。 |
| ボタンメニュー | lightning:buttonMenu | アクションまたは関数のリストを含むドロップダウンメニュー。 |
| lightning:menuItem | lightning:buttonMenu のリスト項目。 | |
| 選択 | lightning:select | HTML select 要素を作成します。 |
| タブ | lightning:tab | lightning:tabset コンポーネント内にネストされた 1 つのタブ。 |
| lightning:tabset | タブのリストを表します。 |
ビジュアルコンポーネント
次のコンポーネントは、たとえばアイコンや読み込みスピナーなどの情報キューを提供します。
| 型 | 主要コンポーネント | 説明 |
|---|---|---|
| バッジ | lightning:badge | 少量の情報を保持する表示ラベル。 |
| カード | lightning:card | 情報の関連グルーピングを囲むコンテナを適用します。 |
| アイコン | lightning:icon | コンテキストを提供するビジュアル要素。 |
| レイアウト | lightning:layout | ページにコンテナを配置するための反応型グリッドシステム。 |
| lightning:layoutItem | lightning:layout コンポーネント内のコンテナ。 | |
| スピナー | lightning:spinner | アニメーションスピナーを表示します。 |
| ツールチップ | lightning:tooltip | ページの要素に関する追加情報を提供するポップアップテキスト。 |
項目コンポーネント
次のコンポーネントでは、値を入力または表示できます。
| 型 | 主要コンポーネント | 説明 |
|---|---|---|
| 入力 | lighting:input | type 属性に応じてユーザ入力を受け入れる対話型コントロールを表します。 |
| 国際化 | lighting:formattedDateTime | 書式設定された日付と時刻を表示します。 |
| lightning:formattedNumber | 書式設定された数値を表示します。 | |
| テキストエリア | lightning:textArea | 複数行のテキスト入力。 |