コンポーネントでの幅の認識

Lightning アプリケーションビルダーでページの範囲にコンポーネントを追加するときに、@api flexipageRegionWidth を使用してコンポーネントにその範囲の幅を渡します。いくつかの戦略的 CSS を使用すれば、実行時、範囲ごとに異なる表示でコンポーネントに表示できます。

たとえば、リストビューコンポーネントは幅認識コンポーネントであるため、小さい範囲と大きい範囲で異なって表示されます。

大きい範囲と小さい範囲のリストビュー

コンポーネントの JavaScript クラスで、@api デコレータを使用して公開 flexipageRegionWidth プロパティを作成します。このプロパティは、ページ上でコンポーネントが配置されている範囲の幅値を受け取ります。

1// testClass.js
2import { LightningElement, api } from "lwc";
3
4export default class TestClass extends LightningElement {
5  @api flexipageRegionWidth;
6}

HTML テンプレートで flexipageRegionWidth プロパティを使用します。flexipageRegionWidth の値が変更されると、コンポーネントが再表示されます。

1<!-- testClass.html -->
2<template>
3  <div class={flexipageRegionWidth}>...</div>
4</template>

CSS を使用して、異なる範囲幅で表示されるときのコンポーネントの動作を定義します。有効な CSS クラス値は、SMALL、MEDIUM、LARGE です。次のサンプル CSS スニペットでは、大きい範囲の場合、コンポーネントは赤の背景で表示されるように指定されています。小さい範囲の場合、コンポーネントは青の背景で表示されます。

1/* testClass.css */
2
3div.LARGE {
4  background: red;
5  ...;
6}
7div.SMALL {
8  background: blue;
9  ...;
10}

The Japanese Summer '24 guide is now live

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