Déterminer la taille de la partie Web rendue
Parfois, les applications SharePoint Framework (SPFx) personnalisées doivent connaître la taille rendue d’un élément Web Part pour diverses raisons. Cette valeur peut changer lorsque les composants Web Parts sont consultés sur différents appareils, tels qu’un ordinateur de bureau ou un navigateur mobile.
La taille rendue du site Web Part peut également être influencée en fonction de l’endroit où il est placé sur une page. Si le site Web Part est utilisé en tant que pagesd’application à un seul élément, il peut être d’une taille unique, mais s’il est également utilisé comme rendu de partie Web dans une mise en page avec une ou plusieurs colonnes, il peut être rendu dans une taille complètement différente.
La fonctionnalité du partie Web Part peut varier en fonction de la taille du contenu rendu.
Introduit dans la version SPFx version 1.12, les développeurs peuvent déterminer la largeur du volet Web. Auparavant, le seul moyen de déterminer cette valeur de manière fiable était par le biais de moyens non pris en compte, tels que l’inspection du DOM de la page.
Obtenir la largeur du partie Web Rendue
La propriété de la classe de partie Web Part renvoie la largeur actuellement rendue du site Web Part sous la forme width d’un nombre. Les composants Web Parts 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 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>`;
}
Détecter les changements de largeur du volet Web
Les développeurs peuvent également déterminer à quel moment la largeur rendue du partie Web Part change en manipulant un événement :
protected onAfterResize(newWidth: number): void;
Cette API est invoquée lorsque la largeur de l’élément DOM du conteneur de contenu Web Part est modifiée, par exemple lorsque la fenêtre du navigateur est re resserée et lorsque le volet de propriétés est ouvert/fermé.
Les composants Web Parts doivent utiliser cette méthode pour effectuer des opérations telles que le ré-affichage des composants en fonction de la nouvelle largeur disponible pour le composant Web Part.
protected onAfterResize(newWidth: number) {
console.log(`the new width of the web part is ${newWidth}`);
}