Typescript SharePoint联机全宽页

我仍在探索SharePoint Online创建Web部件，并使用Typescript通过visual studio代码进行部署

我创建了一个HelloWorld Web部件并将其上传到第页。我能够创建包文件，上传到应用程序目录，安装并添加到页面

一旦它在页面上，它就不会占据整个页面，在页面布局部分，我无法看到全幅选项

从下面的截图可以看到，我的网页部件位于页面的中心，而我想要的是它应该是全宽的，它应该占据整个页面

在剖面布局中，缺少全宽选项

有人可以建议我或给我提示如何使用SPFX在SharePoint Online中创建整页Web部件吗

---

官方文件上有以下提示：

此时，SharePoint Workbench不支持在全宽列布局中测试web部件。相反，您必须将您的web部件部署到开发人员租户，创建一个通信站点，并在那里测试您的web部件

如果已完成上述操作，则可以看到mainfest.json文件夹中有“supportsFullBleed”：true。如果没有，可以添加它

请参阅以下链接：

---

官方文件上有以下提示：

此时，SharePoint Workbench不支持在全宽列布局中测试web部件。相反，您必须将您的web部件部署到开发人员租户，创建一个通信站点，并在那里测试您的web部件

如果已完成上述操作，则可以看到mainfest.json文件夹中有“supportsFullBleed”：true。如果没有，可以添加它

请参阅以下链接：

---

因为您已经打包并上传了它。您不能在SPO站点上执行此操作。您需要编辑manifest.json文件。您可以添加“supportsFullBleed”：true以启用Web部件的全宽列。并重新打包、上载和安装到目录

缺点是没有办法在本地工作台上测试您的全宽Web部件。您必须在SP online上执行此操作。你可以找到参考资料

您还可以使用默认存在于SharePoint 2013和Office 365中的奥斯陆母版页。要更改主控形状，如果您使用的是协作网站，则需要激活发布功能，并且需要使用自定义css删除额外的页边距

.contentwrapper {
margin: 0;
}

#titleAreaBox {
margin: auto 20px!important;
}  

---

因为你已经打包并上传了。您不能在SPO站点上执行此操作。您需要编辑manifest.json文件。您可以添加“supportsFullBleed”：true以启用Web部件的全宽列。并重新打包、上载和安装到目录

缺点是没有办法在本地工作台上测试您的全宽Web部件。您必须在SP online上执行此操作。你可以找到参考资料

您还可以使用默认存在于SharePoint 2013和Office 365中的奥斯陆母版页。要更改主控形状，如果您使用的是协作网站，则需要激活发布功能，并且需要使用自定义css删除额外的页边距

.contentwrapper {
margin: 0;
}

#titleAreaBox {
margin: auto 20px!important;
}  

---

您可以递归地修复

workbenchPageContent

下方（以及Web部件上方）所有元素的填充和边距

（这是一个骇人的解决方案，但似乎效果很好）

从

componentDidMount

内部调用以下函数可以解决工作台中的所有问题，如果使用

supportsFullBleed

部署时不会出现任何问题

function fixWorkbench（元素？：任意，深度：编号=0）{
如果（！elem&&depth==0）
elem=document.getElementById（“workbenchPageContent”）；
如果（！elem | | depth>20）返回null；
elem.style.padding=“0px 0px 0px 0px”；
elem.style.margin=“0px 0px 0px 0px”；
map（child=>fixWorkbench（child，depth+1））；
}

您可以递归地修复

工作台页面内容下方（以及您的Web部件上方）所有元素的填充和边距

（这是一个骇人的解决方案，但似乎效果很好）

从
componentDidMount
内部调用以下函数可以解决工作台中的所有问题，如果使用
supportsFullBleed
部署时不会出现任何问题

function fixWorkbench（元素？：任意，深度：编号=0）{
如果（！elem&&depth==0）
elem=document.getElementById（“workbenchPageContent”）；
如果（！elem | | depth>20）返回null；
elem.style.padding=“0px 0px 0px 0px”；
elem.style.margin=“0px 0px 0px 0px”；
map（child=>fixWorkbench（child，depth+1））；
}
我已经将“supportsFullBleed”属性设置为true，但仍然没有任何用处。@salah9您正在使用协作站点吗？如果需要，则需要通过激活发布功能来更改主控形状。并且需要一些自定义CSS来删除额外的边距。在回答中更新。我创建了子站点作为发布站点，并添加了相同的Web部件，效果很好。在工作台中进行测试：您可以添加一个普通的
.css
文件，您可以在Web部件启动时导入以下内容：
#workbenchPageContent{margin:0；max width:none；}
这将使页面占据（几乎）用于测试的页面的全宽。请确保在发布时删除导入。我已将“supportsFullBleed”属性设置为true，但仍然没有任何用处。@salah9您使用的是协作网站吗？如果需要，则需要通过激活发布功能来更改主控形状。并且需要一些自定义CSS来删除额外的边距。在回答中更新。我创建了子站点作为发布站点，并添加了相同的Web部件，效果很好。对于工作台中的测试：您可以添加一个普通的
.css
文件，该文件在Web部件启动时导入，内容如下：
#workbenchPageContent{margin:0；