typescript - SharePoint Online 全宽页面

Question

我仍在探索 SharePoint Online 创建 Web 部件并使用 Typescript 通过 Visual Studio 代码进行部署。

我创建了一个 HelloWorld webpart 并将其上传到页面上。我能够创建包文件，将其上传到 App-Catalog，安装它并添加到页面。

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

正如您从下面的屏幕截图中看到的那样，我的 webpart 位于页面的中心，而我想要的是它应该是全角的，它应该占据整个页面。

在部分布局中，缺少全宽选项。

任何人都可以建议我或给我提示如何使用 SPFX 在 SharePoint Online 中创建整个页面 web 部件。

标签： typescriptsharepointweb-partssharepoint-online

Answer 1

由于您已经打包并上传。你不能在 SPO 网站上做到这一点。您需要编辑 manifest.json 文件。您可以添加 "supportsFullBleed": true 为您的 Web 部件启用全宽列。并再次打包、上传并安装到目录中。

不利的一面是无法在本地工作台中测试全宽 Web 部件。你必须在网上的SP上做。你可以在这里找到参考。

{
  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "34f6d7f2-262f-460a-8b65-152d784127cb",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportsFullBleed": true,

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld"
    }
  }]
}

您还可以使用默认存在于 SharePoint 2013 和 Office 365 中的 Oslo 母版页。要更改母版页，如果您使用协作网站，则需要激活发布功能，并且您需要使用自定义 css 删除额外的利润。

.contentwrapper {
margin: 0;
}

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