Déterminer la taille du composant WebPart rendu

Parfois, les applications SharePoint Framework personnalisées (SPFx) doivent connaître la taille de rendu d’un composant WebPart pour diverses raisons. Cette valeur peut changer lorsque les composants WebPart sont affichés sur différents appareils, tels qu’un navigateur de bureau ou mobile.

La taille de rendu du composant WebPart peut également être influencée en fonction de l’emplacement où il est placé sur une page. Si le composant WebPart est utilisé en tant que pages d’application monopart, il peut être de taille unique, mais s’il est également utilisé comme rendu de composant WebPart dans une mise en page avec une seule colonne ou plusieurs colonnes, il peut être rendu dans une taille complètement différente.

Les fonctionnalités du composant WebPart peuvent différer en fonction de la taille du composant WebPart rendu.

Introduit dans la version SPFx v1.12, les développeurs peuvent déterminer la largeur du composant WebPart rendu. Auparavant, la seule façon de déterminer cette valeur de manière fiable était d’utiliser des moyens non pris en charge, tels que l’inspection du DOM de la page.

Obtenir la largeur du composant WebPart rendu

La width propriété de la classe de composant WebPart retourne la largeur actuelle du composant WebPart sous la forme d’un nombre. Les composants WebPart doivent utiliser cette propriété pour effectuer des opérations telles que tout style conditionnel des composants en fonction de la largeur initiale disponible pour le composant WebPart.

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

Détecter quand la largeur du composant WebPart change

Les développeurs peuvent également déterminer quand la largeur affichée du composant WebPart change en gérant un événement :

protected onAfterResize(newWidth: number): void;

Cette API est appelée lorsque la largeur de l’élément DOM du conteneur de composants WebPart est modifiée, par exemple lorsque la fenêtre du navigateur est redimensionnée et lorsque le volet de propriétés est activé ouvert/fermé.

Les composants WebPart doivent utiliser cette méthode pour effectuer des opérations telles que le rendu potentiel des composants en fonction de la nouvelle largeur disponible pour le composant WebPart.

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