Lightning Design System のバリエーションの使用

lightning:accordion コンポーネントは、コンテンツ領域を含むセクションを縦に積み上げたコレクションです。セクションは、lightning:accordionSection コンポーネントで定義されます。デフォルトでは、一度に展開できるセクションは 1 つのみです。allowMultipleSectionsOpen 属性を使用すると、複数のセクションを展開できます。このコンポーネントでは variant 属性はサポートされません。lightning:accordion は、Lightning Design System のアコーディオンのスタイル設定を使用します。

lightning:avatar コンポーネントは、取引先やユーザなどのオブジェクトを表す画像です。アバターはさまざまなサイズで作成でき、バリエーションは 2 つあります。lightning:avatar は、Lightning Design System のアバターのスタイル設定を使用します。

lightning:badge コンポーネントは、少量の情報を保持する表示ラベルです。このコンポーネントでは variant 属性はサポートされません。lightning:badge は、Lightning Design System のバッジのスタイル設定を使用します。

lightning:breadcrumb コンポーネントは、ページのパスを親ページに対する相対パスとして表示します。ブレッドクラムは、lightning:breadcrumbs コンポーネントにネストされています。このコンポーネントでは variant 属性はサポートされません。lightning:breadcrumb は、Lightning Design System のブレッドクラムのスタイル設定を使用します。

lightning:button コンポーネントは、クライアント側コントローラでアクションを実行するボタンです。ボタンは、3 種類 (button (デフォルト)、reset、submit) のいずれかになります。ボタンでは、テキスト表示ラベルの左側または右側のアイコンがサポートされます。lightning:button は、Lightning Design System のボタンのスタイル設定を使用します。

lightning:buttonGroup コンポーネントは、ナビゲーション���ーを作成するために一緒に表示できるボタンのグループです。グループ内に lightning:button コンポーネントと lightning:buttonMenu コンポーネントをネストできます。ボタングループ自体では variant 属性はサポートされませんが、ボタンおよびボタンメニューコンポーネントではバリエーションがサポートされます。たとえば、ボタングループ内に <lightning:button variant="inverse" label="Refresh" /> をネストできます。lightning:buttonMenu を含める場合は、ボタンの後に配置し、slds-button_last クラスを渡して境界線を調整します。lightning:buttonGroup は、Lightning Design System のボタングループのスタイル設定を使用します。

lightning:buttonIcon コンポーネントは、クライアント側コントローラでアクションを実行する、アイコンのみのボタンです。ボタンアイコンはさまざまなサイズで作成できます。Lightning Design System のユーティリティアイコンのみがサポートされます。lightning:buttonIcon は、Lightning Design System のボタンアイコンのスタイル設定を使用します。

lightning:buttonIconStateful コンポーネントは、状態を保持するアイコンのみのボタンです。ボタンを押すと、状態を切り替えることができます。ボタンアイコンはさまざまなサイズで作成できます。Lightning Design System のユーティリティアイコンのみがサポートされます。selected 属性は、true に設定されている場合、slds-is-selected クラスを追加します。lightning:buttonIconStateful は、Lightning Design System のボタンアイコンのスタイル設定を使用します。

lightning:buttonMenu コンポーネントは、lightning:menuItem コンポーネントで表される、メニュー項目リストがあるドロップダウンメニューです。メニュー項目は、チェックマークを入れるまたは外すことが可能で、クライアント側コントローラでアクションを実行できます。さまざまなサイズのアイコンを使用してボタンメニューを作成したり、ボタンを基準にして、さまざまな場所にドロップダウンメニューを配置したりできます。バリエーションによってボタンの外観が変更されます。これは、ボタンアイコンのバリエーションと類似しています。

lightning:buttonMenu では、メニュー項目間の横線を作成する lightning:menuDivider コンポーネントがサポートされています。メニューの区切り線には、線の上下のスペースを狭くする compact バリエーションがあります。lightning:menuSubheader コンポーネントを使用すると、メニュー項目のリストにサブヘッダーを作成できます。これにバリエーションはありません。

lightning:buttonMenu は、Lightning Design System のメニューのスタイル設定を使用します。

lightning:buttonStateful コンポーネントは、状態を切り替えるボタンです。ステートフルボタンには、状態に基づいて異なる表示ラベルやアイコンを表示できます。Lightning Design System のユーティリティアイコンのみがサポートされます。lightning:buttonStateful は、Lightning Design System のボタンのスタイル設定を使用します。

lightning:card コンポーネントは、スタイル設定されたコンテナを HTML の article タグ内の情報のグルーピングに適用するために使用されます。情報は 1 つの項目の場合もあれば、関連リストなど、項目のグループの場合もあります。lightning:card は、Lightning Design System のカードのスタイル設定を使用します。

lightning:carousel コンポーネントは、横方向に 1 つずつ表示される画像のコレクションです。lightning:carouselImage 子コンポーネントを使用して、画像を指定します。カルーセルでは variant 属性はサポートされず、外部要素で slds-carousel クラスを使用します。lightning:carousel は、Lightning Design System のカルーセルのスタイル設定を使用します。

lightning:checkboxGroup コンポーネントは、単一または複数のオプションの選択を有効にするチェックボックスのグループです。このコンポーネントは、一連のチェックボックスの一斉グルーピングに適さない type="checkbox" の lightning:input とは異なります。チェックボックスグループでは variant 属性はサポートされませんが、slds-form-element クラスが、チェックボックスグループを囲む fieldset 要素に追加されます。lightning:checkboxGroup は、Lightning Design System のチェックボックスのスタイル設定を使用します。

Lightning:combobox コンポーネントは、オプションのリストの単一選択を有効にする���力要素です。選択結果は入力値として表示されます。複数選択コンボボックスでは、選択された各オプションが入力要素の下のピルに表示されます。lightning:combobox は、Lightning Design System のコンボボックスのスタイル設定を使用します。

lightning:datatable コンポーネントは、型に応じて書式設定されたデータの列を表示するテーブルです。列のサイズ変更、ヘッダーレベルのアクション、行レベルのアクション、行の選択、列の並び替え、テキストの折り返しおよびクリッピング、行の採番、セルコンテンツの配置を有効にします。データテーブルでは variant 属性はサポートされませんが、slds-table と slds-table_bordered クラスが table 要素に追加されます。クライアント側コントローラのコンポーネントの属性および列のプロパティを使用して、テーブルをカスタマイズできます。lightning:datatable は、Lightning Design System のデータテーブルのスタイル設定を使用します。

lightning:datatable と同様に、lightning:treeGrid は、テーブルに表示されるデータの階層ビューです。Lightning Design System のツリーのスタイル設定を使用します。

lightning:dualListbox コンポーネントは、2 つのリストボックスを提供します。単一または複数のオプションを 2 番目のリストボックスに移動して、選択したオプションを並び替えることができます。lightning:dualListbox は、Lightning Design System のデュエル選択リストのスタイル設定を使用します。

lightning:dynamicIcon コンポーネントは、さまざまなアニメーションアイコンを表します。type 属性は表示するアニメーションアイコンを指定します。また、Lightning Design System の動的アイコンに対応するものです。lightning:dynamicIcon は、Lightning Design System の動的アイコンのスタイル設定を使用します。

lightning:fileUpload コンポーネントは、レコードへのファイルのアップロードを有効にします。ファイルアップローダには、ドラッグアンドドロップ機能とファイル種別による絞り込みが含まれています。variant 属性はサポートされませんが、slds-file-selector クラスがコンポーネントに追加されます。lightning:fileUpload は、Lightning Design System のファイルセレクタのスタイル設定を使用します。

lightning:helptext コンポーネントは、画面の要素を説明する少量のテキストを含むポップオーバーがあるアイコンを表示します。iconVariant 属性は、ヘルプテキストアイコンの外観を変更し、lightning:icon コンポーネントと同じバリエーションをサポートします。iconName 属性を使用して別のユーティリティアイコンを指定し、デフォルトのアイコンを変更することもできます。slds-popover および slds-popover_tooltip クラスは、ツールチップに適用されます。lightning:helptext は、Lightning Design System のツールチップのスタイル設定を使用します。

lightning:icon コンポーネントは、コンテキストを示し、使いやすさを向上させるビジュアル要素です。Lightning Design System のすべてのアイコンがサポートされますが、バリエーションがサポートされるのはユーティリティアイコンのみです。アイコンはさまざまなサイズで作成できます。また、Lightning Design System アイコンを使用する代わりに、カスタム SVG スプライトを使用してリソースへのパスを指定することもできます。lightning:icon は、Lightning Design System のアイコンのスタイル設定を使用します。

lightning:input コンポーネントは、入力項目やチェックボックスなど、ユーザ入力を受け入れる対話型コントロールです。lightning:input は、Lightning Design System の入力のスタイル設定を使用します。

lightning:listView コンポーネントは、所有しているか「参照・更新」アクセス権があるレコード、および自分と共有されているレコードのリストビューを表します。インライン編集、行レベルのアクション、アクションバーは、Lightning Experience、Salesforce アプリケーション、コミュニティでのみサポートされます。デスクトップでは、このコンポーネントは完全なリストビューを表示します。その他のすべてのフォーム要素 (タブレットやモバイルデバイスなど) では、このコンポーネントはモバイル対応のリストビューを表示します。

lightning:map コンポーネントは、1 つ以上のロケーションの地図を安全に表示します。このコンポーネントでは variant 属性はサポートされませ��。ロケーションのリストのタイトルやフッターを追加できる属性がサポートされます。lightning:map は、Lightning Design System の地図のスタイル設定を使用します。

lightning:pill コンポーネントは、角丸の境界線で囲まれたテキスト表示ラベルで、削除ボタンと一緒に表示されます。ピルには、テキスト表示ラベルの横にアイコンまたはアバターを含めることができます。このコンポーネントでは variant 属性はサポートされませんが、コンテンツおよびその他の属性で、適用されるスタイル設定が判断されます。たとえば、hasError="true" を使用するピルは、赤い境界線とエラーアイコンを使用するピルとして表示されます。lightning:pill は、Lightning Design System のピルのスタイル設定を使用します。

さらに、lightning:pillContainer コンポーネントを使用して、コンテナ内にピルを表示できます。

lightning:progressBar コンポーネントは、左か��右の水平方向の進行状況バーを表示して、操作の進行状況を示します。Lightning Design System の進行状況バーのスタイル設定を使用します。

lightning:progressIndicator コンポーネントは、処理のステップを表示し、完了している内容を示します。ネストされた lightning:progressStep コンポーネントは、各ステップで表示される表示ラベルと値を定義します。type 属性は、進行状況インジケータまたはパスを表示するかどうかを指定します。type="base" を使用する場合、variant 属性を使用できます。lightning:progressIndicator は、Lightning Design System の進行状況バーとパスのスタイル設定を使用します。

type="path" を使用する場合、variant 属性は使用できません。

lightning:radioGroup コンポーネントは、単一のオプションの選択を有効にするラジオボタンのグループです。type 属性は、一般的なラジオボタンのグループを表示するのか、長方形のボタンのグループを表示するのかを指定します。lightning:radioGroup は、Lightning Design System のラジオグループのスタイル設定を使用します。

lightning:inputRichText コンポーネントは、カスタマイズ可能なツールバーがあるリッチテキストエディタです。ツールバーはエディタの上部に表示されますが、bottom-toolbar バリエーションを使用してエディタの下に位置を変更できます。ツールバーに画像ボタンを追加するには、lightning:inputRichText に lightning:insertImageButton コンポーネントをネストします。このボタンでファイルブラウザが開き、挿入する画像をテキストエディタにアップロードします。lightning:inputRichText は、Lightning Design System のリッチテキストエディタのスタイル設定を使用します。

lightning:select コンポーネントは、オプションを 1 つ選択できるドロップダウンリストです。lightning:select は、Lightning Design System の選択のスタイル設定を使用します。

lightning:slider コンポーネントは、2 つの指定された数値の間の値を指定するスライダです。type 属性は、横方向 (デフォルト) または縦方向のスライダを表示するかどうかを指定します。lightning:slider は、Lightning Design System のスライダのスタイル設定を使用します。

lightning:spinner コンポーネントは、データを読み込み中であることを示すスピナーです。スピナーはさまざまなサイズで作成できます。lightning:spinner は、Lightning Design System のスピナーのスタイル設定を使用します。

lightning:tabset コンポーネントは、lightning:tab コンポーネントで表される、対応するコンテンツ領域があるタブのリストです。lightning:tabset は、Lightning Design System のタブのスタイル設定を使用します。

lightning:textarea コンポーネントは、複数行のテキストを入力するための入力項目です。Lightning Design System のテキストエリアのスタイル設定を使用します。

lightning:tile コンポーネントは、レコードに関連付けられた関連情報のグループです。このコンポーネントではバリエーションはサポートされませんが、slds-tile_board クラスを渡してボードを作成できます。同様に、タイルボディで定義リストを使用してアイコンを表示するタイルを作成したり、順序なしリストを使用してアバターを表示するタイルのリストを作成したりできます。lightning:tile は、Lightning Design System のタイルのスタイル設定を使用します。

lightning:tree コンポーネントは、階層構造を視覚化するものです。ツリー項目 (ブランチ) は、展開したり折りたたんだりできます。このコンポーネントでは variant 属性はサポートされませんが、Lightning Design System のツリーのスタイル設定を使用します。

lightning:verticalNavigation コンポーネントは、単一のレベルのリンクのリストであり、アイコンと、折りたたんだり展開したりするオーバーフローセクションがサポートされます。このコンポーネントでは variant 属性はサポートされませんが、compact と shaded 属性を使用して、コンパクトスペース設定および網掛け背景のスタイル設定に対応できます。このコンポーネントでは、アイコン、バッジ、オーバーフローコンテンツを追加できるサブコンポーネントがサポートされます。

lightning:verticalNavigation は、Lightning Design System の垂直ナビゲーションのスタイル設定を使用します。