Styling Hooks : Lightning Design System

Salesforce

Last updated at 2024-05-01Posted at 2024-05-01

スタイリングフックは CSS カスタムプロパティを使用するため、コンポーネントのスタイルを簡単にカスタマイズし、ブランドを表現できます。

一般視聴者 (GA)

2.17.0 (Spring '22) リリースの時点で、スタイリングフックは一般視聴者 (GA) 向けに正式に指定されています。このリリースでは、サポートされているコンポーネント全体に CSS カスタムプロパティ機能が追加され、CSS カスタムプロパティをサポートしないブラウザ (IE11 など) 用のレガシースタイルシートが作成され、これらのフックの名前空間が更新されます。開発者は、完全にサポートされた方法で既存のスタイルフックをすべて使用して、Lightning コンポーネントの外観と操作性をカスタマイズできるようになりました。

Lightning Design System スタイル設定フックを使用したコンポーネントのカスタマイズ (ベータ)

Lightning Design System スタイル設定フックでは、コンポーネントの外観をカスタマイズできるように一連の CSS カスタムプロパティが提供されます。Winter '21 では、限定された CSS カスタムプロパティセットをコンポーネントレベルのカスタマイズで使用できます。

ネームスペースの移行

上で述べたように、GA の取り組みの一環としてスタイルフックの名前空間を変更しました。今後、SLDS の公式スタイリングフックネームスペースはになります--slds。古い名前空間は、短期的には引き続き機能します。ただし、古い名前空間を使用した既存の宣言がある場合は、移行することをお勧めします。 --sds

スタイリングフック構文の他の部分は変更されていないため、移行は簡単なプロセスになるはずです。既存のすべての宣言について、それらをに移行すると、長期サポートパスが提供されます。利用可能なコンポーネントスタイルフックに関する最新情報については、「ブループリントの概要」ページにアクセスして、目的のコンポーネントを選択してください。 --sds--slds

スタイリングフックとは

スタイリングフックは CSS カスタムプロパティを使用します。これにより、特にWeb コンポーネントやシャドウ DOMを操作する場合に、コンポーネントのスタイルをカスタマイズしてブランドを表現することが簡単になります。

以下は、ブランドボタンとスタイリングフックを使用したブランドボタンの例です。

Lightning Web コンポーネント (LWC)およびSalesforce Lightning Design System (SLDS)で作業している場合、スタイルフックを使用すると、サポートされているエレガントな方法で Lightning コンポーネントをカスタマイズできます。

現在、私たちはコンポーネントレベルのカスタマイズのみに焦点を当てています。テーマは将来のバージョンで利用できるようになる予定です。

コードはどのようなものですか?

スタイリングフックの中心部は、CSS カスタムプロパティ(CSS 変数またはカスケード変数とも呼ばれます) を使用して構築されます。以下は、スタイリングフックを含むバッジブループリントを使用した簡単な例です。

.slds-badge {
  background-color: var(--slds-c-badge-color-background, #ECEBEA);
  border-radius: var(--slds-c-badge-radius-border, 15rem);
  color: var(--slds-c-badge-text-color, #080707);
  /* Styles not pertinent have been omitted */
}

背景色のプロパティを取得し、それに関連するスタイルフックの実装を部分的に分解してみましょう。

var(…)

これは、CSS カスタムプロパティの保存された値を使用できるようにする CSS 関数です。 CSS カスタムプロパティとオプションのフォールバック値の 2 つの引数を受け入れます。この例では、は最初の引数である CSS カスタムプロパティであり、は 2 番目の引数であるフォールバック値です。 --slds-c-badge-color-background#ECEBEA

MDN で機能の詳細を確認する var()

--slds

カスタムプロパティを宣言するには、名前が二重ハイフン ( --) で始まる必要があります。sldsは、Salesforce Lightning Design System 用に予約された名前空間です。

-c

この識別子は、カスタムプロパティが SLDS 内のコンポーネントレベルのカスタマイズであることを示します。これは、そのコンポーネントが存在するコンポーネントに固有のものであり、無関係なコンポーネントには影響しません。

-background

これは、カスタマイズされるセマンティックユーザーインターフェイスプロパティです。この例ではbackgroundプロパティを参照しています。

#ECEBEA

これは、CSS カスタムプロパティが無効な場合のフォールバック値です。スタイリングフックでは、この値はデザインシステムによってトークンを使用して定義され、変更できません。これは設計システムの賢明なデフォルトです。

仕組みは?

次のセクションでは、 Lightning Web コンポーネント(LWC)に関する実践的な知識があることを前提としています。そうでない場合は、Salesforce のオープンソースのエンタープライズグレードの Web コンポーネント基盤に関する優れた情報とドキュメントを、developer.salesforce.comで見つけることができます。

LWC で作業していない場合でも、このセクションはスタイルフックを使用するための役立つガイダンスを提供します。

設定

実際のスタイリングフックの基本的な例を示すために、バッジ Lightning Web コンポーネントを含むコンポーネントを作成します。

myComponent.html

<template>
  <lightning-badge label="Badge Label"></lightning-badge>
</template>

myComponent.css

:host {
  /* Your CSS goes here */
}

myComponent.js

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {}

特別な CSS 疑似クラスを使用して、カスタムコンポーネント内で CSS カスタムプロパティを宣言できます。疑似クラスは、スタイルのスコープをシャドウ DOM のシャドウホストに設定します。これは、スタイルのスコープを設定するいくつかの便利な方法の 1 つです。さまざまな種類のスコープについて詳しくは、「スコープ」セクションを参照してください。 :host myComponent:host

スタイリングフック❤️トークン
トークンを使用してスタイルフックを割り当てることをお勧めします。これにより、CSS がよりシンプルになり、保守が容易になります。 SLDS デザイントークンは、便利な標準化された値のセットを提供します。

例A

CSS では、:host のスタイルフックに対応するカスタムプロパティを疑似クラスに追加します。 lightning-badge

この例では、内部開発者のみが使用できる標準の SLDS デザイントークンを参照します。スタイルフックを設定するために使用されます。予期しないアクセシビリティの問題を回避するために、テキストの色も設定します。 --lwc-paletteOrange80 --slds-c-badge-color-background--slds-c-badge-text-color

コンポーネントとバリアント
スタイリングフックを使用してコンポーネントをカスタマイズする前に、まずコンポーネントが提供する標準バリアントを利用することをお勧めします。 SLDS ではlightning-badge、特定の意味を持つ標準的な色のバリエーションを生成するために使用するクラスがいくつか提供されています。

アクセシビリティ要件
対照的な意味論的プロパティを同時に変更します。たとえば、背景とテキストの色のスタイルフックの両方を同時にカスタマイズする必要があります。これにより、色のコントラストが予期せず変化することがなくなります。

これにより、バッジの背景色がカスタマイズされます。

:host {
  --slds-c-badge-color-background: var(--lwc-paletteOrange80); // internal only token
  --slds-c-badge-text-color: var(--lwc-paletteNeutral10); // internal only token
}

例B

次の例では、カスタム Aura トークンを使用して、独自のブランドの異なる外観を実現してみましょう。

カスタムトークン
Lightning Web コンポーネントを開発する場合は、カスタム Aura トークンを使用して独自のトークンのコレクションを作成および管理します。組織内で作成されたカスタム Aura トークン、または非管理パッケージからインストールされたカスタム Aura トークンは、すべての Web コンポーネント間で共有できます。 Web コンポーネントの CSS ファイルで、名前空間プレフィックスを使用してカスタムトークンを参照します--c-。

:host {
  --slds-c-badge-color-background: var(--c-example-purple);
  --slds-c-badge-text-color: var(--c-example-white);
}

例C

最後の例では、CSS カスタムプロパティを 1 つ追加して、さらに独特な雰囲気を実現します。

:host {
  --slds-c-badge-color-background: var(--c-example-purple);
  --slds-c-badge-text-color: var(--c-example-white);
  --slds-c-badge-radius-border: var(--c-example-border-radius-small);
}

カスタムコンポーネントの内で独自の CSS カスタムプロパティを宣言することで、コンポーネントの内部 CSS に触れたり、バッジの構築方法に詳しくなくても、スタイルフックに値を割り当ててバッジの外観を変更できます。フードの下！ :host

高度な使用法

このセクションでは、スタイリングフックの基本的な使用法を紹介しました。エクスペリエンスコンポーネントの特定の部分をカスタマイズしたり、カスタムプロパティの範囲をアプリの特定の領域に制限したりする必要がある場合があります。

Lightning Design System スタイリングフックを使用したコンポーネントのスタイル設定

サポートの制限

コンポーネントのブループリント

これらの Lightning Design System コンポーネントブループリントとその CSS カスタムプロパティは、基本コンポーネントではサポートされていません。

モーダル - モーダルコンポーネントブループリントは基本コンポーネントに対応しません。
トースト -lightning/platformShowToastEventモジュールはカスタムプロパティをサポートしていません--slds-c-toast-*。
ツールチップ -lightning-helptextコンポーネントはカスタムプロパティをサポートしていません--slds-c-tooltip-*。

リンク

カスタムプロパティを使用したリンクのスタイル設定はサポートされていません。リンクは、lightning-breadcrumbやlightning-formatted-*、モジュールなどの基本コンポーネントで使用されますlightning/navigation。

フォーム要素

カスタムプロパティを使用したフォーム要素のスタイル設定はサポートされていません。フォーム要素はlightning-input-*、lightning-checkbox-group、lightning-radio-group、、lightning-textareaコンポーネントで使用されます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up