レンダリングされた Web パーツのサイズを決定する

場合によっては、カスタム SharePoint Framework (SPFx) アプリケーションで、さまざまな理由で Web パーツのレンダリングされたサイズを把握する必要があります。 この値は、デスクトップやモバイル ブラウザーなど、さまざまなデバイスで Web パーツを表示するときに変更される可能性があります。

Web パーツのレンダリングされたサイズは、ページ上のどこに配置されるかに基づいて影響を受ける場合もあります。 Web パーツを 1 つのパーツ アプリ ページとして使用する場合は、1 つのサイズになる可能性がありますが、Web パーツとしても使用すると、1 列または複数の列だけでページ レイアウトにレンダリングされる場合は、まったく異なるサイズでレンダリングされる可能性があります。

Web パーツの機能は、レンダリングされた Web パーツのサイズによって異なる場合があります。

SPFx v1.12 リリースで導入された開発者は、レンダリングされた Web パーツの幅を決定できます。 以前は、この値を確実に判断する唯一の方法は、ページ DOM の検査など、サポートされていない手段を使用することでした。

レンダリングされた Web パーツの幅を取得する

Web パーツ クラスの プロパティは width 、Web パーツの現在のレンダリングされた幅を数値で返します。 Web パーツでは、このプロパティを使用して、Web パーツで使用可能な初期幅に基づいてコンポーネントの条件付きスタイル設定などの操作を実行する必要があります。

public render(): void {
  this.domElement.innerHTML = `
    <div class="${ styles.helloWorld }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <p class="${ styles.description }">Web Part width: ${this.width}</p>
          </div>
        </div>
      </div>
    </div>`;
}

Web パーツの幅が変更されたときに検出する

開発者は、イベントを処理することで、Web パーツのレンダリングされた幅がいつ変化するかを判断することもできます。

protected onAfterResize(newWidth: number): void;

この API は、ブラウザー ウィンドウのサイズが変更されたときや、プロパティ ウィンドウが開いているか閉じているかの切り替え時など、Web パーツ コンテナー DOM 要素の幅が変更されたときに呼び出されます。

Web パーツでは、このメソッドを使用して、Web パーツで使用可能な新しい幅に基づいてコンポーネントを再レンダリングする可能性があるなどの操作を実行する必要があります。

protected onAfterResize(newWidth: number) {
  console.log(`the new width of the web part is ${newWidth}`);
}