Bestimmen der gerenderten Webpartgröße

Manchmal müssen benutzerdefinierte SharePoint-Framework (SPFx)-Anwendungen die gerenderte Größe eines Webparts aus verschiedenen Gründen kennen. Dieser Wert kann sich ändern, wenn Webparts auf verschiedenen Geräten angezeigt werden, z. B. auf einem Desktop oder einem mobilen Browser.

Die gerenderte Größe des Webparts kann auch beeinflusst werden, je nachdem, wo es auf einer Seite platziert wird. Wenn das Webpart als einzelne Webpart-App-Seiten verwendet wird, kann es eine Größe haben, aber wenn es auch als Webpart-Render in einem Seitenlayout mit nur einer Spalte oder mehreren Spalten verwendet wird, kann es in einer völlig anderen Größe gerendert werden.

Die Funktionalität des Webparts kann sich je nach Größe des gerenderten Webparts unterscheiden.

Mit spFx v1.12 können Entwickler die Breite des gerenderten Webparts bestimmen. Bisher war die einzige Möglichkeit, diesen Wert zuverlässig zu bestimmen, über nicht unterstützte Mittel, z. B. das Überprüfen des Seiten-DOM.

Abrufen der gerenderten Webpartbreite

Die width -Eigenschaft der Webpartklasse gibt die aktuell gerenderte Breite des Webparts als Zahl zurück. Webparts sollten diese Eigenschaft verwenden, um Vorgänge wie bedingte Formatierungen von Komponenten basierend auf der anfänglich verfügbaren Breite für das Webpart auszuführen.

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>`;
}

Erkennen, wenn sich die Breite des Webparts ändert

Entwickler können auch bestimmen, wann sich die gerenderte Breite des Webparts ändert, indem sie ein Ereignis behandeln:

protected onAfterResize(newWidth: number): void;

Diese API wird aufgerufen, wenn die Breite des DOM-Elements des Webpartcontainers geändert wird, z. B. wenn die Größe des Browserfensters geändert wird und der Eigenschaftenbereich geöffnet/geschlossen wird.

Webparts sollten diese Methode verwenden, um Vorgänge auszuführen, z. B. komponenten basierend auf der neuen verfügbaren Breite für das Webpart neu zu rendern.

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