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

lightning:avatar コンポーネントは、取引先やユーザなどのオブジェクトを表す画像です。アバターはさまざまなサイズで作成できます。詳細は、「lightning:avatar」を参照してください。

lightning:badge コンポーネントは、少量の情報を保持する表示ラベルです。このコンポーネントではバリエーションはサポートされていません。詳細は、「lightning:badge」を参照してください。

lightning:breadcrumbs コンポーネントは、少量の情報を保持する表示ラベルです。このコンポーネントではバリエーションはサポートされていません。詳細は、「lightning:breadcrumbs」を参照してください。

lightning:button コンポーネントは、クライアント側コントローラでアクションを実行するボタンです。ボタンでは、テキスト表示ラベルの左側または右側のアイコンがサポートされます。詳細は、「lightning:button」を参照してください。

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

lightning:buttonIcon コンポーネントは、クライアント側コントローラでアクションを実行する、アイコンのみのボタンです。ボタンアイコンはさまざまなサイズで作成できます。Lightning Design System のユーティリティアイコンのみがサポートされます。詳細は、「lightning:buttonIcon」を参照してください。

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

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

lightning:card コンポーネントは、HTML の article タグ内の関連情報のグループです。詳細は、「lightning:card」を参照してください。

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

lightning:input コンポーネントは、入力項目やチェックボックスなど、ユーザ入力を受け入れる対話型コントロールです。詳細は、「lightning:input (ベータ)」を参照してください。

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

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

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

lightning:inputRichText コンポーネントは、カスタマイズ可能なツールバーがあるリッチテキストエディタです。ツールバーはエディタの上部に表示されますが、bottom-toolbar バリエーションを使用してエディタの下に位置を変更できます。詳細は、「lightning:inputRichText (ベータ)」を参照してください。

lightning:select コンポーネントは、オプションを 1 つ選択できるドロップダウンリストです。詳細は、「lightning:select」を参照してください。

lightning:spinner コンポーネントは、データを読み込み中であることを示すスピナーです。スピナーはさまざまなサイズで作成できます。詳細は、「lightning:spinner」を参照してください。

lightning:tabset コンポーネントは、lightning:tab コンポーネントで表される、対応するコンテンツ領域があるタブのリストです。詳細は、「lightning:tabset (ベータ)」を参照してください。

lightning:textarea コンポーネントは、複数行のテキストを���力するための入力項目です。詳細は、「lightning:textarea」を参照してください。

lightning:tile コンポーネントは、関連情報のグループです。このコンポーネントではバリエーションはサポートされていませんが、slds-tile--board クラスを渡してボードを作成できます。同様に、タイルボディで定義リストを使用してアイコンを表示するタイルを作成したり、順序なしリストを使用してアバターを表示するタイルのリストを作成したりできます。詳細は、「lightning:tile」を参照してください。