ui 名前空間のコンポーネントは、API バージョン 46.0 の時点では非推奨です。lightning 名前空間のコンポーネントを使用することをお勧めします。
フレームワークには、共通のユーザインターフェースコンポーネントが ui 名前空間に備えられています。これらのすべてのコンポーネントは、aura:component または aura:component の子コンポーネントのいずれかを拡張します。aura:component は、デフォルトの表示を行う抽象コンポーネントです。ui:input や ui:output などのユーザインターフェースコンポーネントは、キーボード操作やマウス操作などの共通のユーザインターフェースイベントを処理しやすくします。各コンポーネントは適宜スタイルを設定したり拡張したりできます。
すべての使用できるコンポーネントについては、https://<myDomain>.lightning.force.com/docs/component-library (<myDomain> は、Salesforce カスタムドメインの名前) のコンポーネント参照を参照してください。
ui コンポーネントと、推奨される lightning 名前空間の対応コンポーネントを下表に示します。
複雑なインタラクティブコンポーネント
次のコンポーネントは、1 つ以上のサブコンポーネントがあり、インタラクティブです。
| メッセージ |
ui:message |
さまざまな重要度のメッセージ通知 |
lightning:notificationsLibrary |
| メニュー |
ui:menu |
|
lightning:buttonMenu |
| ui:menuList |
|
| ui:actionMenuItem |
|
lightning:menuItem |
| ui:checkboxMenuItem |
|
| ui:radioMenuItem |
|
| ui:menuItemSeparator |
|
lightning:menuDivider |
| ui:menuItem |
|
lightning:menuItem |
| ui:menuTrigger |
|
lightning:buttonMenu |
| ui:menuTriggerLink |
|
入力コントロールコンポーネント
次のコンポーネントは、たとえばボタンやチェックボックスなどがあり、インタラクティブです。
| ボタン |
ui:button |
押したりクリックしたりできるアクションの実行が可能なボタン |
lightning:button |
| チェックボックス |
ui:inputCheckbox |
複数選択をサポートする選択可能なオプション |
lightning:input と checkbox、toggle、または checkbox-button 型 |
| ui:outputCheckbox |
参照のみのチェックボックスの値を表示します |
lightning:input と checkbox 型および readonly 属性 |
| ラジオボタン |
ui:inputRadio |
単一選択のみをサポートする選択可能なオプション |
lightning:input と radio 型または lightning:radioGroup
|
| ドロップダウンリスト |
ui:inputSelect |
オプションを含むドロップダウンリスト |
lightning:combobox |
| ui:inputSelectOption |
ui:inputSelect コンポーネントのオプション |
ビジュアルコンポーネント
次のコンポーネントは、たとえばエラーメッセージや読み込みスピナーなどの情報キューを提供します。
| 項目レベルのエラー |
ui:inputDefaultError |
エラーが発生したときに表示されるエラーメッセージ |
lightning:input と項目検証 |
| スピナー |
ui:spinner |
読み込みスピナー |
lightning:spinner |
項目コンポーネント
次のコンポーネントでは、値を入力または表示できます。
| 通貨 |
ui:inputCurrency |
通貨を入力するための入力項目 |
lightning:input と number 型および currency フォーマッタ |
| ui:outputCurrency |
デフォルトまたは指定された形式で、通貨を表示します |
lightning:formattedNumber と currency スタイル |
| メール |
ui:inputEmail |
メールアドレスを入力するための入力項目 |
lightning:input と email 型 |
| ui:outputEmail |
クリック可能なメールアドレスを表示します |
lightning:formattedEmail |
| 日時 |
ui:inputDate |
日付を入力するための入力項目 |
lightning:input と date 型 |
| ui:inputDateTime |
日時を入力するための入力項目 |
lightning:input と datetime 型 |
| ui:outputDate |
デフォルトまたは指定された形式で、日付を表示します |
lightning:formattedDateTime |
| ui:outputDateTime |
デフォルトまたは指定された形式で、日時を表示します |
lightning:formattedDateTime または lightning:formattedTime
|
| パスワード |
ui:inputSecret |
秘密のテキストを入力するための入力項目 |
lightning:input と password 型 |
| 電話番号 |
ui:inputPhone |
電話番号を入力するための入力項目 |
lightning:input と phone 型 |
| ui:outputPhone |
電話番号を表示します |
lightning:formattedPhone |
| 数値 |
ui:inputNumber |
数値を入力するための入力項目 |
lightning:input と number 型 |
| ui:outputNumber |
数値を表示します |
lightning:formattedNumber |
| 範囲 |
ui:inputRange |
範囲内の値を入力するための入力項目 |
lightning:slider |
| リッチテキスト |
ui:inputRichText |
リッチテキストを入力するための入力項目 |
lightning:inputRichText |
| ui:outputRichText |
リッチテキストを表示します |
lightning:formattedRichText |
| テキスト |
ui:inputText |
1 行のテキストを入力するための入力項目 |
lightning:input |
| ui:outputText |
テキストを表示します |
lightning:formattedText |
| テキストエリア |
ui:inputTextArea |
複数行のテキストを入力するための入力項目 |
lightning:textarea |
| ui:outputTextArea |
参照のみのテキストエリアを表示します |
lightning:formattedText |
| URL |
ui:inputURL |
URL を入力するための入力項目 |
lightning:input と url 型 |
| ui:outputURL |
クリック可能な URL を表示します |
lightning:formattedUrl |
j