レンダリングされた Web パーツのサイズを決定するDetermine the rendered web part size

カスタム SharePoint Framework (SPFx) アプリケーションでは、さまざまな理由で Web パーツのレンダリングサイズを把握する必要がある場合があります。Sometimes custom SharePoint Framework (SPFx) applications need to know the rendered size of a web part for various reasons. この値は、Web パーツがデスクトップやモバイル ブラウザーなど、さまざまなデバイスで表示される場合に変更される可能性があります。This value can change when web parts are viewed on different devices, such as a desktop or mobile browser.

Web パーツのレンダリング サイズは、ページ上の配置場所に基づいて影響を受け取る場合もあります。The rendered size of the web part can also be influenced based on where it's placed on a page. Web パーツを 1つのパーツ アプリ ページとして使用する場合は、1 つのサイズになる可能性がありますが、1 つの列または複数の列を持つページ レイアウトで Web パーツレンダリングとして使用する場合は、完全に異なるサイズでレンダリングできます。If the web part is used as a single part app pages, it could be one size, but if also used as a web part render in a page layout with just one column or multiple columns, it could be rendered in a completely different size.

Web パーツの機能は、レンダリングされた Web パーツのサイズによって異なる場合があります。The functionality of the web part could differ based on the size of the rendered web part.

SPFx v1.12 リリースで導入された開発者は、レンダリングされた Web パーツの幅を決定できます。Introduced in the SPFx v1.12 release, developers can determine the width of the rendered web part. 以前は、この値を確実に判断する唯一の方法は、ページ DOM の検査など、サポートされていない手段を使用することでした。Previously, the only way to reliably determine this value was through unsupported means, such as inspecting the page DOM.

レンダリングされた Web パーツの幅を取得するObtain the rendered web part width

Web width パーツ クラスのプロパティは、Web パーツの現在のレンダリング幅を数値として返します。The width property on the web part class returns the current rendered width of the web part as a number. Web パーツは、このプロパティを使用して、Web パーツの初期使用可能な幅に基づいてコンポーネントの条件付きスタイル設定などの操作を実行する必要があります。Web parts should utilize this property to perform operations such as any conditional styling of components based on the initial available width for the web part.

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 パーツの幅が変更された場合の検出Detect when the web part width changes

開発者は、イベントを処理することで、Web パーツのレンダリング幅がいつ変更されるのかも判断できます。Developers can also determine when the web part's rendered width changes by handling an event:

protected onAfterResize(newWidth: number): void;

この API は、ブラウザー ウィンドウのサイズが変更された場合やプロパティ ウィンドウが開く/閉じる切り替え時など、Web パーツ コンテナー DOM 要素の幅が変更されると呼び出されます。This API is invoked when the web part container DOM element width is changed, such as when the browser window is resized and when the property pane is toggled open/closed.

Web パーツは、このメソッドを使用して、Web パーツで使用可能な新しい幅に基づいてコンポーネントを再レンダリングする可能性があるなどの操作を実行する必要があります。Web parts should utilize this method to perform operations such as potentially re-rendering components based on the new available width for the web part.

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