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

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

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

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

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

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

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

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

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

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