Lightning 基本コンポーネントの設計バリエーションの使用

多くの Lightning 基本コンポーネントには、複数の設計バリエーションがあります。設計バリエーションごとにコンポーネントの外観が異なります。

基本コンポーネントの設計バリエーションは、Lightning Design System (SLDS) のバリエーションに対応しています。たとえば、lightning-button は、さまざまなテキストや背景色をボタンに適用する設計バリエーションをサポートしています。

設計バリエーションのあるコンポーネントには、variant 属性があります。variant 属性を使用して、設計バリエーションを選択します。

この例では、ボタンに青い背景色を適用する brand 設計バリエーションを使用してボタンを作成します。

1<lightning-button
2  variant="brand"
3  label="Submit"
4  title="submit form"
5  onclick={handleClick}
6></lightning-button>

variant を指定しない場合や、サポートされていない値を指定する場合、デフォルト値が使用されます。lightning-button の場合、デフォルトは neutral です。

望ましい設計バリエーションが表示されない場合、またはコンポーネントに variant 属性がない場合は、Lightning Design System クラスを使用して、必要なスタイル設定を実現します。

たとえば、余白ユーティリティクラスを lightning-button 基本コンポーネントに適用するには、class="slds-m-left_medium" を使用します。

1<lightning-button
2  variant="brand"
3  label="Submit"
4  title="submit"
5  onclick={handleSubmit}
6  class="slds-m-left_medium"
7></lightning-button>

一部の基本コンポーネントでは、次の例のようにネストされた要素にユーティリティクラスを適用することもできます。lightning-card 基本コンポーネントのボディでは、slds-p-horizontal_small パディングユーティリティクラスを使用します。

1<lightning-card title="Hello">
2  <lightning-button label="New" slot="actions"></lightning-button>
3  <p class="slds-p-horizontal_small">Card Body (custom component)</p>
4  <p slot="footer">Card Footer</p>
5</lightning-card>

適切な設計バリエーションまたは SLDS クラスが見つからない場合は、スタイル設定フックの使用を検討してください。

基本コンポーネントの設計バリエーションと対話型の例については、「コンポーネントの参照」を参照してください。

Tip

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。