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

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

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

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

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

lightning:button コンポーネントは、クライアント側コントローラでアクションを実行するボタンです。ボタンでは、テキスト表示ラベルの左側または右側のアイコンがサポートされます。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 Design System のメニューのスタイル設定を使用します。

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

lightning:card コンポーネントは、HTML の article タグ内の関連情報のグループです。lightning:card は、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: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 コンポーネントは、画面の要素を説明する少量のテキストを含むポップオーバーがあるアイコンを表示します。ヘルプテキストでは variant 属性はサポートされませんが、slds-popover と slds-popover_tooltip クラスがツールチップに追加されます。lightning:helptext は、Lightning Design System のツールチップのスタイル設定を使用します。

lightning:icon コンポーネントは、コンテキストを示し、使いやすさを向上させるビジュアル要素です。Lightning Design System のすべてのアイコンがサポートされますが、バリエーションがサポートされるのはユーティリティアイコンのみです。アイコンはさまざまなサイズで作成できます。lightning:icon は、Lightning Design System のアイコンのスタイル設定を使用します。

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

lightning:layout コンポーネントは、ページ内または別のコンテナ内にコンテナを配置するための柔軟なグリッドシステムです。variant 属性を使用する代わりに、レイアウトのカスタマイズは horizontalAlign、verticalAlign、pullToBoundary で制御されます。lightning:layout は、Lightning Design System のグリッドのスタイル設定を使用します。詳細は、次のリソースを参照してください。

• lightning:layout
• Lightning Design System の考慮事項

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

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

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

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

また、lightning:path と lightning:picklistPath は、指定された選択リスト項目に基づいたレコードの処理の進行状況を表示できるようにします。lightning:path は [設定] の [パス設定] に基づいてパスを表示し、lightning:picklistPath は picklistFieldApiName 属性から派生したパスを表示します。

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

lightning:inputRichText コンポーネントは、カスタマイズ可能なツールバーがあるリッチテキストエディタです。ツールバーはエディタの上部に表示されますが、bottom-toolbar バリエーションを使用してエディタの下に位置を変更できます。lightning:inputRichText は、Lightning Design System のリッチテキストエディタのスタイル設定を使用します。

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

lightning:slider コンポーネントは、2 つの指定された数値の間の値を指定するスライダです。このコンポーネントでは variant 属性はサポートされません。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 の垂直ナビゲーションのスタイル設定を使用します。