如何在代码中识别 Webpart 在 SPFx 中使用全角

Question

目前我可以在 SharePoint 中创建允许在全角模式下使用的 Web 部件（清单：“supportsFullBleed”：true）。但我需要相应地改变一些风格。有什么方法可以识别代码中使用全角的 webpart 吗？ 使用的 SPFx：1.15.2

我尝试检查元素的宽度，它在某些情况下有效，但是当全角 Web 部件用于例如移动设备时，比宽度更不可靠。

Answer 1

我见过的最好的镜头可能是“formFactor”上下文属性（它是隐藏的/不可用类型定义，但实际上它存在）：

https://learn.microsoft.com/en-us/javascript/api/sp-webpart-base/basewebpartcontext?view=sp-typescript-latest#@microsoft-sp-webpart-base-basewebpartcontext-formfactor-member

Answer 2

虽然不是受支持的方法，但我发现全角部分有一个 CanvasZone--fullWidth 的 css 类，而普通部分则没有。

这意味着在您的 Web 部件中，您可以在 dom 树中查询具有此类的父级。如果找到，则您的 Web 部件位于全角部分。

例如，在webpart.onInit中：

const fullWidth = this.domElement.closest(".CanvasZone--fullWidth") !== null;

类似的技术可用于检测 Web 部件是否处于垂直部分

const isVertical = this.domElement.closest(".CanvasVerticalSection") !== null;