Office UI Fabric库的{CSS}奇怪

Question

我正在使用Word 2016加载项项目，并且在使用Office UI Fabric库时遇到了一些困难。

基本上我想把我的加载项放在官方办公室外观＆amp;感觉，所以我认为Office UI Fabric是结合Fabric javascript组件的最佳选择，比如下拉菜单等等。

我安装了这两个NuGet包： OfficeUIFabric 2.6.3 和 OfficeUIFabricJS 1.4.0 ，然后我通过使用这些css类向页面添加了一些组件：＆ ＃34; ms-Dropdown＆＃34;，＆＃34; ms-ChoiceField＆＃34;和一些图标类，如＆＃34; ms-Icon - 设置＆＃34;。

这些是我所拥有的（奇数）结果：

• OfficeUIFabric和OfficeUIFabricJS提供了两个不同版本的相同＆＃34; fabric.components.css＆＃34;文件，因此最终结果取决于安装这两个软件包的顺序。

• 使用＆＃34; fabric.components.css＆＃34;来自OfficeUIFabric 2.6.3，所有图标都缺失，但ChoiceField的样式正确。

• 使用＆＃34; fabric.components.css＆＃34;来自OfficeUIFabricJS 1.4.0的图标是可见的，但是在矩形文本框之外绘制了下拉按钮，并且ChoicheField的样式是错误的（标签包装和复选框是标准的HTML控件）。

您对这些图书馆有什么经验吗？ 我即将切换到更舒适的框架，如Bootstrap或类似的......

Answer 1

  

您对这些图书馆有经验吗？

是;）如果这是你的问题。

  

这些是我有......的奇怪结果

我很惊讶你得到了任何结果。 OfficeUIFabric库使用不正确的问题。让我澄清一下团队如何计划使用这些库...

• Fabric 2.6.1（当前最新版本为2.6.3）是最后一个已知（稳定）版本的软件包，其中核心部分（CSS）和组件部分（JS组件）在一起。基本上，当您安装此版本时，您将按原样使用它。不需要任何其他包。事实上，你不能安装在顶级不同的核心版本或JS版本，你将制动包装完整性（这是你观察到的）
• 下一个开发和主要版本完全不同。包裹分开＆＃34; JS组件＆＃34;部分并成为＆＃34; Office UI Fabric Core＆＃34;。这个包不是一组CSS样式，使您的自定义应用程序看起来像Office本身。当前的核心软件包应该单独使用（基本上你可以在方便的时候使用ms_样式）或者使用＆＃34; Office UI Fabric JS＆＃34;。
• 最后是新包＆＃34; Office UI Fabric JS＆＃34;是什么样的JS组件（曾经包含在2.6.1包中）应该在你想要＆＃34;样式化时使用＃34;看起来像Office本机组件的组件。 Fabric JS 1.4.0使用Fabric Core 5.0.1。可能你的下一个问题为什么会发生？旧包2.6.1包含基于JQuery的组件部分;新的1.4.0（很奇怪，啊？版本较低）不依赖于任何使用TypeScript编写的第三方软件包。

我希望这能为你或那些困惑的人澄清一些事情。我们使用Fabric软件包，我相信第一版，并尝试2.6.1和新的1.4.0 + 5.0.1。有很多问题，太多的东西乱序。我们不能花这么多时间才能拥有新的光滑外观。基本上我们在2.6.1版本上停止了一些调整，至少现在不会使用新的Fabric。如果我愿意回过头来再次选择UI包，那么我不会选择Fabric，而是使用JQuery UI或JQuery Mobile。微软团队没有冒犯，但Fabric团队看起来像是一群尽力而为的青少年，但经验的好运破坏了一切。这不是我们过去从微软看到的世界级软件。

Answer 2

斯拉瓦描述的是正确的。

作为替代方案，您可以在项目的CDN中引用Fabric吗？如果引用CDN是您的选项（而不是安装NuGet包），请按照此主题从CDN引用Fabric： Use Office UI Fabric in Office Add-ins

CDN上的文件已经构建在一起，因此版本号匹配。此外，由于Fabric JS使用Fabric Core，因此Fabric Core的正确版本与Fabric JS文件一起部署。因此，您不必猜测哪个版本的Fabric Core应该与更新版本的Fabric JS一起使用。

Answer 3

我想与Office外接JS库分享我的最新经验。

ATM，有两种方法来开发Office 365加载项的前端部分：

• 使用office-ui-fabric-react库的ReactJS应用。这是构建外接程序的推荐方法，因为它是具有所有适当样式和良好组件的最新项目。
• 您自己的应用具有office-ui-fabric-core的CSS / SASS样式（只是基本样式，没有组件）。考虑到加载项的外观必须遵循official guidelines，这些样式已被很好地记录下来（请参阅项目的'dist / documentation'下），并且可以很好地替代Bootstrap / Material UI框架。

我不建议将office-ui-fabric-js库与JS框架（例如Angular，Vue）结合使用，即使乍一看它可能会很吸引人（具有一些组件和漂亮的样式）。这是一个非专业构建的库（请参见this list of problems），其中包含来自旧版office-ui-fabric-core的CSS，并且似乎已被废弃。

从其他方面officially recommended：

• AngularJS库（ng-officeuifabric）正式为“ in archive mode”。没有支持Angular的迹象。
• iOS project已有2年没有更新了（尽管之前没有太多更新）。