Determinación del tamaño del elemento web representado

A veces, las aplicaciones de SharePoint Framework personalizadas (SPFx) necesitan conocer el tamaño representado de un elemento web por varias razones. Este valor puede cambiar cuando los elementos web se ven en distintos dispositivos, como un explorador de escritorio o móvil.

El tamaño representado del elemento web también se puede influir en función de dónde se coloque en una página. Si el elemento web se usa como páginas de aplicación de un solo elemento, podría ser de un tamaño, pero si también se usa como elemento web en un diseño de página con una sola columna o varias columnas, se podría representar en un tamaño completamente diferente.

La funcionalidad del elemento web podría diferir en función del tamaño del elemento web representado.

Introducido en la versión 1.12 de SPFx, los desarrolladores pueden determinar el ancho del elemento web representado. Anteriormente, la única manera de determinar este valor de forma confiable era a través de medios no admitidos, como inspeccionar la página DOM.

Obtener el ancho del elemento web representado

La width propiedad de la clase de elemento web devuelve el ancho representado actual del elemento web como un número. Los elementos web deben usar esta propiedad para realizar operaciones como cualquier estilo condicional de componentes en función del ancho inicial disponible para el elemento 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>`;
}

Detectar cuándo cambia el ancho del elemento web

Los desarrolladores también pueden determinar cuándo cambia el ancho representado del elemento web controlando un evento:

protected onAfterResize(newWidth: number): void;

Esta API se invoca cuando se cambia el ancho del elemento DOM del contenedor de elementos web, como cuando se cambia el tamaño de la ventana del explorador y cuando se activa o cierra el panel de propiedades.

Los elementos web deben usar este método para realizar operaciones como, por ejemplo, volver a representar componentes en función del nuevo ancho disponible para el elemento web.

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