使用SharePoint Framework开发webpart的一些技巧汇总

最新推荐文章于 2024-08-28 09:37:55 发布

计算机器

最新推荐文章于 2024-08-28 09:37:55 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/shrenk/article/details/84314330

版权

本文汇总了使用SharePoint Framework开发webpart的六个实用技巧，包括设置自定义图标、隐藏webpart、提示用户配置、改变属性面板布局、分页显示属性及设置属性初始值。通过这些技巧，可以提升webpart的用户体验和管理效率。

摘要由CSDN通过智能技术生成

1, 为你的webpart指定一个图标

在创建一个webpart的时候，SPFx会使用一个默认图标，如下所示：

这个图标是在manifest文件中，通过officeFabricIconFontName属性指定的，默认的值是“Page”，所以我们看到的是一个页面的图标。

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

可以修改这个属性的值，换成其他图标，例如“Calendar”，重新启动gulp serve，就可以看到新图标：

所有可以使用的fabric图标，可以参考：https://developer.microsoft.com/en-us/fabric#/styles/icons

如果希望使用自定义的图标，需要删除“officeFabricIconFontName”这个属性，添加另一个属性“iconImageUrl”，因为officeFabricIconFontName会覆盖iconImageUrl这个属性。iconImageUrl的值可以是图片的url，也可以是base64编码的图片：

"preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "WebpartTips" },
    "description": { "default": "WebpartTips description" },
    "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKOWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAEjHnZZ3VFTXFofPvXd6oc0wAlKG3rvAANJ7k15FYZgZYCgDDjM0sSGiAhFFRJoiSFDEgNFQJFZEsRAUVLAHJAgoMRhFVCxvRtaLrqy89/Ly++Osb+2z97n77L3PWhcAkqcvl5cGSwGQyhPwgzyc6RGRUXTsAIABHmCAKQBMVka6X7B7CBDJy82FniFyAl8EAfB6WLwCcNPQM4BOB/+fpFnpfIHomAARm7M5GSwRF4g4JUuQLrbPipgalyxmGCVmvihBEcuJOWGRDT77LLKjmNmpPL