LoginSignup
0
0
@Keiji_otsubo(Keiji Otsubo)

Styling Hooks : Lightning Design System

Last updated at Posted at 2024-05-01

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

一般視聴者 (GA)

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

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

ネームスペースの移行

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

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

スタイリングフックとは

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

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

image.png

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

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

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

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

image.png

.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
}

image.png

例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);
}

image.png

例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);
}

image.png

カスタム コンポーネントの 内で独自の 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コンポーネントで使用されます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0