Determinar o tamanho da Web Part renderizado

Às vezes, aplicativos de Estrutura do SharePoint personalizados (SPFx) precisam saber o tamanho renderizado de uma Web Part por vários motivos. Esse valor pode ser alterado quando as Web Parts são exibidas em dispositivos diferentes, como uma área de trabalho ou navegador móvel.

O tamanho renderizado da Web Part também pode ser influenciado com base em onde ela é colocada em uma página. Se a Web Part for usada como páginas de aplicativo de uma única parte, ela poderá ser de um tamanho, mas se também for usada como uma renderização de web part em um layout de página com apenas uma coluna ou várias colunas, ela poderá ser renderizada em um tamanho completamente diferente.

A funcionalidade da Web Part pode ser diferente com base no tamanho da Web Part renderizada.

Introduzidos na versão do SPFx v1.12, os desenvolvedores podem determinar a largura da Web Part renderizada. Anteriormente, a única maneira de determinar esse valor de forma confiável era por meio sem suporte, como inspecionar o DOM da página.

Obter a largura da Web Part renderizada

A width propriedade na classe Web Part retorna a largura renderizada atual da Web Part como um número. As Web parts devem utilizar essa propriedade para executar operações como qualquer estilo condicional de componentes com base na largura inicial disponível para a 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>`;
}

Detectar quando a largura da Web Part é alterada

Os desenvolvedores também podem determinar quando a largura renderizada da Web Part é alterada manipulando um evento:

protected onAfterResize(newWidth: number): void;

Essa API é invocada quando a largura do elemento DOM do contêiner da Web Part é alterada, como quando a janela do navegador é redimensionada e quando o painel de propriedade é alternado aberto/fechado.

As Web parts devem utilizar esse método para executar operações como componentes potencialmente de renderização com base na nova largura disponível para a Web Part.

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