フレームワークには、共通のユーザインターフェースコンポーネントが ui 名前空間に備えられています。これらのすべてのコンポーネントは、aura:component または aura:component の子コンポーネントのいずれかを拡張します。aura:component は、デフォルトの表示を行う抽象コンポーネントです。ui:input や ui:output などのインタラクティブなユーザインターフェースコンポーネントは、キーボード操作およびマウス操作などの共通のユーザインターフェースイベントを提供する ui:interactive を拡張します。各コンポーネントのスタイルは、適宜設定できます。使用可能なすべてのコンポーネントについては、https://<mySalesforceInstance>.lightning.force.com/auradocs/reference.app (<mySalesforceInstance> は、na1 など、組織をホストするインスタンスの名前です) のコンポーネント参照をご覧ください。
コンポーネントの実装方法についてのチュートリアルは、次のリソースを参照してください。
入力コントロールコンポーネント
アプリケーションで使用可能な入力コントロールコンポーネントは、次のとおりです。
| ボタン |
ui:button |
押したりクリックしたりできるアクションの実行が可能なボタン |
| チェックボックス |
ui:inputCheckbox |
複数選択をサポートする選択可能なオプション |
| ui:outputCheckbox |
参照のみのチェックボックスの値を表示します |
| メニュー |
ui:menu |
|
| ui:menuList |
|
| ui:actionMenuItem |
|
| ui:checkboxMenuItem |
|
| ui:radioMenuItem |
|
| ui:menuItemSeparator |
|
| ui:menuItem |
|
| ui:menuTrigger |
|
| ui:menuTriggerLink |
|
| ラジオボタン |
ui:inputRadio |
単一選択のみをサポートする選択可能なオプション |
| ドロップダウンリスト |
ui:inputSelect |
オプションを含むドロップダウンリスト |
| ui:inputSelectOption |
ui:inputSelect コンポーネントのオプション |
ビジュアルコンポーネント
使用可能なビジュアルコンポーネントは、次のとおりです。
| 項目レベルのエラー |
ui:inputDefaultError |
エラーが発生したときに表示されるエラーテキスト |
| メッセージ |
ui:message
|
さまざまな重要度レベルのメッセージ通知 |
| スピナー |
ui:spinner |
読み込みスピナー |
項目コンポーネント
使用可能な共通の入力および出力コンポーネントは、次のとおりです。
| 通貨 |
ui:inputCurrency |
通貨を入力するための入力項目 |
| ui:outputCurrency |
デフォルトまたは指定された形式で、通貨を表示します |
| メール |
ui:inputEmail |
メールアドレスを入力するための入力項目 |
|
| ui:outputEmail |
クリック可能なメールアドレスを表示します |
| 日時 |
ui:inputDate |
日付を入力するための入力項目 |
| inputDateTime |
日時を入力するための入力項目 |
| ui:outputDate |
デフォルトまたは指定された形式で、日付を表示します |
| ui:outputDateTime |
デフォルトまたは指定された形式で、日時を表示します |
| パスワード |
ui:inputSecret |
秘密のテキストを入力するための入力項目 |
| 電話番号 |
ui:inputPhone |
電話番号を入力するための入力項目 |
| ui:outputPhone |
クリック可能な電話番号を表示します |
| 数値 |
ui:inputNumber |
数値を入力するための入力項目 |
| ui:outputNumber |
数値を表示します |
| リッチテキスト |
ui:inputRichText |
リッチテキストを入力するための入力項目 |
|
ui:outputRichText
|
リッチテキストを表示します |
| テキスト |
ui:inputText |
1 行のテキストを入力するための入力項目 |
| ui:outputText |
テキストを表示します |
| テキストエリア |
ui:inputTextArea |
複数行のテキストを入力するための入力項目 |
| ui:outputTextArea |
参照のみのテキストエリアを表示します |
| URL |
ui:inputURL |
URL を入力するための入力項目 |
| ui:outputURL |
クリック可能な URL を表示します |
j