SLDS ブループリントからのコンポーネントの作成

使用事例に合う基本コンポーネントが見つからない場合は、最も近い SLDS ブループリントを見つけて、独自のカスタムコンポーネントを作成します。

ここではまず、コンポーネントの参照で使用可能な基本コンポーネントのリストはすべて確認済みで、スタイル設定フックを使用して基本コンポーネントのスタイルをカスタマイズすることでは要件を満たせないことを前提としています。

SLDS ブループリントからコンポーネントを作成するには、SLDS ブループリントカタログを検索して目的のコンポーネントに最も近いデザインを見つけます。対応する基本コンポーネントがある SLDS ブループリントでは、ページの右上に [Lightning コンポーネント] ボタン (1) があります。各ブループリントには、デバイスサポートの詳細 (アダプティブ、レスポンシブ、またはデスクトップ専用)(2) が表示されます。アダプティブブループリントには非デスクトップブレークポイント用のマークアップが含まれ、レスポンシブブループリントは画面サイズに合わせてスムーズに拡大縮小されます。

Lightning コンポーネントとデバイスサポートが表示されている SLDS ブループリント

基本コンポーネントは SLDS スタイル設定を実装しますが、すべての基本コンポーネントがモバイル画面でサポートされているわけではありません。サポート内容は、基本コンポーネントのドキュメントに記載されています。

たとえば、データテーブル SLDS ブループリントはアダプティブですが、lightning-datatable 基本コンポーネントはモバイルに対応していません。また、アダプティブなタブ SLDS ブループリントの場合、モバイル画面ではタブが積み上げられ、ボタンとして機能します。対応する lightning-tabset では、このモバイル動作はサポートされていません。

基本バリエーションから始める

範囲指定通知を作成する必要があり、それに対応する Lightning Web コンポーネントがないことがわかっているとしましょう。SLDS ブループリントの基本バリエーションから開始して、そこから作成していきます。まず、レスポンシブな基本バリエーションのマークアップをコピーしてテンプレートに貼り付けます。

1<template>
2  <div
3    class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light"
4    role="status"
5  >
6    <div class="slds-media__figure">
7      <span class="slds-icon_container slds-icon-utility-info" title="information">
8        <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
9          <use href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
10        </svg>
11        <span class="slds-assistive-text">information</span>
12      </span>
13    </div>
14    <div class="slds-media__body">
15      <p>
16        It looks as if duplicates exist for this lead.
17        <a href="javascript:void(0);">View Duplicates.</a>
18      </p>
19    </div>
20  </div>
21</template>

この通知では、<div class="slds-media__figure"> タグ内に svg アイコンが含まれています。このアイコンを lightning-icon 基本コンポーネントに置き換えます。

1<template>
2  <div
3    class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light"
4    role="status"
5  >
6    <div class="slds-media__figure">
7      <lightning-icon
8        icon-name="utility:info"
9        alternative-text="information"
10        size="small"
11      ></lightning-icon>
12    </div>
13    <div class="slds-media__body">
14      <p>
15        It looks as if duplicates exist for this lead.
16        <a href="javascript:void(0);">View Duplicates.</a>
17      </p>
18    </div>
19  </div>
20</template>

メッセージをコンポーネントの JavaScript ファイルに移動し、message プロパティをテンプレートにバインドします。

1<template>
2  <div
3    class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light"
4    role="status"
5  >
6    <div class="slds-media__figure">
7      <lightning-icon
8        icon-name="utility:info"
9        alternative-text="information"
10        size="small"
11      ></lightning-icon>
12    </div>
13    <div class="slds-media__body">
14      <p>{message}</p>
15    </div>
16  </div>
17</template>

1import { LightningElement, api } from "lwc";
2
3export default class ScopedNotification extends LightningElement {
4  @api message = "It looks as if duplicates exist ...";
5}

スタイル設定テーマとバリエーションの作成

範囲指定通知ブループリントには [光] と [闇] のテーマが含まれていて、コンポーネントで捕捉する必要があります。getter 関数を使用して、選択したテーマのクラス名を返します。

1import { LightningElement, api } from "lwc";
2
3export default class ScopedNotification extends LightningElement {
4  @api message = "Your message here";
5  @api theme = "";
6
7  get scopedNotificationClass() {
8    let className = "slds-scoped-notification slds-media slds-media_center";
9    if (this.theme === "light") {
10      className += " slds-scoped-notification_light";
11    }
12    if (this.theme === "dark") {
13      className += " slds-scoped-notification_dark";
14    }
15    return className;
16  }
17}

テーマが変更されるとアイコンスタイルが変化します。[闇] テーマでは inverse バリエーションが使用されます。正しいバリエーションを返す getter を追加します。

1get iconVariant() {
2  let iconVariant = null;
3
4  if (this.theme == 'dark') {
5    iconVariant = 'inverse';
6  }
7
8  return iconVariant;
9}

使用するテーマに基づいて適応するようにマークアップを更新します。ブループリントの次の静的マークアップを変更して、動的スタイル設定を使用するようにします。

1<div
2  class="slds-scoped-notification
3    slds-media
4    slds-media_center
5    slds-scoped-notification_light"
6  role="status"
7></div>

テンプレート内のクラスを scopedNotificationClass getter にバインドします。

1<div class={scopedNotificationClass} role="status"></div>

同様に、バリエーションの lightning-icon 属性を iconVariant getter にバインドします。

1<lightning-icon
2  icon-name="utility:info"
3  alternative-text="information"
4  size="small"
5  variant={iconVariant}
6></lightning-icon>

コンポーネントの実装

コンポーネントの準備ができました。Lightning アプリケーションビルダーにより、このコンポーネントを別のコンポーネント内で使用したり、特定のページに組み込んだりできます。

次の例では、c-scoped-notification コンポーネントを別の Lightning Web コンポーネント内で使用しています。lightning-layout の例はレスポンシブグリッドレイアウトを提供し、lightning-tabset はタブ SLDS ブループリントに対応しています。

1<lightning-card>
2  <lightning-layout multiple-rows>
3    <lightning-layout-item size="12" small-device-size="9" padding="around-small">
4      <lightning-tabset>
5        <lightning-tab label="Item one">
6          <div class="slds-m-bottom_small">
7            <c-scoped-notification message="Hello notification!" theme="light">
8            </c-scoped-notification>
9          </div>
10        </lightning-tab>
11        <lightning-tab label="Item two"> Tab 2 content here </lightning-tab>
12      </lightning-tabset>
13    </lightning-layout-item>
14    <lightning-layout-item size="12" small-device-size="3" padding="around-small">
15      <p>Sidebar Content Goes Here</p>
16    </lightning-layout-item>
17  </lightning-layout>
18</lightning-card>

small-device-size="9" を指定しているため、最初の lightning-layout-item のコンテンツはタブレットまたはデスクトップ上で画面幅の 75% を占めます (レスポンシブブレークポイント 480 px 以上)。モバイルデバイスで表示すると、size="12" によってコンテンツが調整され、画面幅の 100% を占めます。「レスポンシブレイアウトの作成」を参照してください。

The Japanese Summer '24 guide is now live

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