3

我正在处理 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 或类似的...

4

3 回答 3

4

您对这些库有任何经验吗？

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

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

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

  • Fabric 2.6.1（当前最新版本是2.6.3）是最后一个已知（稳定）版本的包，其中核心部分（CSS）和组件部分（JS 组件）在一起。基本上，当您安装此版本时，您将按原样使用它。不需要任何其他软件包。事实上你不能在上面安装不同的核心版本或JS版本，你会破坏包的完整性（这是你观察到的）
  • 下一次开发和主要版本完全不同。该包将“JS 组件”部分分离出来，成为“ Office UI Fabric Core ”。这个包只不过是一组 CSS 样式，可让您的自定义应用程序看起来像 Of​​fice 本身。当前的核心包应该单独使用（基本上你可以在方便时使用 ms_ 样式）或与“ Office UI Fabric JS ”结合使用。
  • Finally the new package "Office UI Fabric JS" is the set of JS components (which used to be included inside 2.6.1 package) should be used when you want to have "styled" components which will look like Office native components. Fabric JS 1.4.0 uses Fabric Core 5.0.1. Probably your next question why is it happen? The old package 2.6.1 has components part based on JQuery; the new one 1.4.0 (weird, ahh? the version is lower) has no dependency on any 3rd party package, written with TypeScript.

我希望这对您或困惑的人也有所澄清。我们使用 Fabric 包，我相信从版本 1 开始，并尝试 2.6.1 和新的 1.4.0+5.0.1。有很多问题，太多的事情不正常。我们不能花这么多时间来获得新的光滑外观。基本上，我们在 2.6.1 版本上停止了一些调整，至少目前不会使用新的 Fabric。如果我有幸回去再次选择 UI 包，我不会选择 Fabric，事实上，我会使用 JQuery UI 或 JQuery Mobile。微软团队无意冒犯，但 Fabric 团队看起来像一群正在努力的青少年，但运气却破坏了一切。这不是我们过去从微软看到的世界级软件。

于 2017-03-16T17:32:46.240 回答
1

斯拉瓦描述的是正确的。

As an alternative, can you reference Fabric from the CDN in your project? If referencing the CDN is an option for you (instead of installing the NuGet packages), then follow this topic to reference Fabric from the CDN: Use Office UI Fabric in Office Add-ins

The files on the CDN have been built together such that the version numbers match. Also, because Fabric JS uses Fabric Core, the correct version of Fabric Core is deployed along with the Fabric JS files. So you don't have to guess which version of Fabric Core should be used with a newer version of Fabric JS.

于 2017-03-16T19:33:04.260 回答
1

I'd like to share my recent experience with the Office Add-in JS libraries.

ATM, there are two ways of developing the front-end part of the Office 365 add-in:

  • A ReactJS app with using office-ui-fabric-react library. It's a recommended way of building add-ins, as it's an up-to-date project with all proper styles and good components.
  • Your own app with CSS/SASS styles from office-ui-fabric-core (just basic styles, no components). The styles are well documented (see under 'dist/documentation' of the project) and can be a good replacement for Bootstrap/Material UI frameworks, considering that the look of the add-in must obey the official guidelines.

I do NOT recommend using office-ui-fabric-js library in combination with JS frameworks (e.g. Angular, Vue), even if at the first glance it might be appealing (has some components and nice styles). It's an unprofessionally built library (see this list of problems) with CSS from an old version of office-ui-fabric-core, and it seems to be abandoned.

In terms of other ways officially recommended:

于 2018-10-30T04:47:29.663 回答