office-js - CSS 与 Office UI Fabric 库的奇怪之处

Question

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

基本上，我想为我的外接程序提供官方 Office 外观和感觉，因此我认为 Office UI Fabric 与 Fabric javascript 组件(如下拉菜单等)结合使用将是最佳选择。

我安装了这两个 NuGet 包:OfficeUIFabric 2.6.3 和 OfficeUIFabricJS 1.4.0，然后我使用以下 css 类向页面添加了一些组件:“ms-Dropdown”、“ms-ChoiceField”和一些图标类，例如“ms-Icon--Settings”。

这些是我得到的(奇怪的)结果:

• OfficeUIFabric 和 OfficeUIFabricJS 提供同一“fabric.components.css”文件的两个不同版本，因此最终结果取决于这两个包的安装顺序。

• 对于来自 OfficeUIFabric 2.6.3 的“fabric.components.css”，所有图标均丢失，但 ChoiceField 的样式正确。

• 使用来自 OfficeUIFabricJS 1.4.0 的“fabric.components.css”，图标可见，但下拉按钮绘制在矩形文本框之外，并且 ChoicheField 的样式错误(标签换行且复选框是标准 HTML控制)。

您有使用这些库的经验吗？我即将切换到更舒适的框架，例如 Bootstrap 或类似的...

Answer 1

Do you have any experience with these libraries?

是的；)如果这是你的问题。

These are the (odd) results I'm having ...

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

• Fabric 2.6.1 (当前最新版本是 2.6.3 )是包的最后已知(稳定)版本，其中核心部分(CSS)和组件部分(JS 组件)在一起。基本上，当您安装此版本时，您将按原样使用它。不需要任何其他包。事实上你不能安装在不同的核心版本或JS版本上，你会破坏包的完整性(这是你观察到的)
• 接下来的开发和主要版本绝对不同。该包将“JS组件”部分分离出来，变成“Office UI Fabric Core”。这个包只不过是一组 CSS 样式，使您的自定义应用程序看起来像 Of​​fice 本身。当前的核心包应该单独使用(基本上您可以在方便时使用 ms_ 样式)或与“Office UI Fabric JS ”结合使用。
• 最后，当您想要拥有看起来像 Of​​fice native 组件的“样式化”组件时，应该使用新包“Office UI Fabric JS”是一组 JS 组件(以前包含在 2.6.1 包中)。 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 团队看起来就像一群青少年，他们正在尽力而为，但经验的运气却破坏了一切。这不是我们过去从 Microsoft 看到的世界一流的软件。