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-图标--设置”。

这些是我得到的（奇怪的）结果：

• 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

您有使用这些库的经验吗？

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

这些是我得到的（奇怪的）结果......

我很惊讶你居然能得到任何结果。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 本机组件的“样式化”组件时，应该使用新包“ 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 团队看起来就像一群青少年，他们正在尽力而为，但经验的运气却破坏了一切。这不是我们过去从微软看到的世界一流的软件。