CSS Office 的怪异之处 UI Fabric 库
CSS oddities with Office UI Fabric libraries
我正在处理 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" 文件的两个不同版本，因此最终结果取决于这些文件的顺序安装了两个包。
"fabric.components.css" 来自 OfficeUIFabric 2.6.3，缺少所有图标，但 ChoiceField 的样式正确。
"fabric.components.css" 来自 OfficeUIFabricJS 1.4.0，图标可见，但下拉按钮绘制在矩形文本框外，ChoicheField 的样式错误（标签换行和复选框是标准 HTML 控件）。
您有使用这些库的经验吗？
我即将切换到更舒适的框架，例如 Bootstrap 或类似的...
Do you have any experience with these libraries?
是的 ;) 如果这是你的问题。
These are the (odd) results I'm having ...
我很惊讶你能得到任何结果。不正确使用 OfficeUIFabric 库的问题。让我澄清一下背后的团队是如何计划使用这些库的...
- Fabric 2.6.1 (current latest version is 2.6.3) 是软件包的最后一个已知（稳定）版本，其中核心部分 (CSS) 和组件部分（JS 组件）在一起。基本上当你安装这个版本时，你会按原样使用它。不需要任何其他包。事实上你不能在上面安装不同的核心版本或 JS 版本，你会破坏包的完整性（这是你观察到的）
- 下一个开发和主要版本完全不同。该包将 "JS components" 部分分开并成为“Office UI Fabric Core". this package is nothing else as set of CSS styles to make your custom app look like Office itself. The current Core Package should be used on its own (basically you have ms_ styles to use at your convenience) or in the couple with "Office UI Fabric JS”。
- 最后，新包“Office UI Fabric JS”是一组 JS 组件（以前包含在 2.6.1 包中），当您想要 "styled" 组件时，应该使用这些组件看起来像 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 团队看起来像一群年轻人，他们正在努力，但经验运气会破坏一切。这不是我们以前从 Microsoft 看到的世界 class 软件。
Slava 描述的是正确的。
作为替代方案，您可以在您的项目中从 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 一起使用。
我想分享我最近使用 Office 加载项 JS 库的经验。
ATM，Office 365插件的前端部分有两种开发方式：
- 一个使用 office-ui-fabric-react 库的 ReactJS 应用程序。这是构建加载项的推荐方法，因为它是一个具有所有适当样式和良好组件的最新项目。
- 您自己的应用具有来自 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 的 CSS/SASS 样式。
我不建议将 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) 与旧版本 office-ui-fabric-core 中的 CSS 一起使用，它似乎已被废弃。
其他方式而言officially recommended:
- AngularJS库(ng-officeuifabric) is officially "in archive mode”。没有支持Angular的迹象。
- iOS project已经2年没更新了（虽然之前没显示多少生命）
我正在处理 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" 文件的两个不同版本，因此最终结果取决于这些文件的顺序安装了两个包。
"fabric.components.css" 来自 OfficeUIFabric 2.6.3，缺少所有图标，但 ChoiceField 的样式正确。
"fabric.components.css" 来自 OfficeUIFabricJS 1.4.0，图标可见，但下拉按钮绘制在矩形文本框外，ChoicheField 的样式错误（标签换行和复选框是标准 HTML 控件）。
您有使用这些库的经验吗？ 我即将切换到更舒适的框架，例如 Bootstrap 或类似的...
Do you have any experience with these libraries?
是的 ;) 如果这是你的问题。
These are the (odd) results I'm having ...
我很惊讶你能得到任何结果。不正确使用 OfficeUIFabric 库的问题。让我澄清一下背后的团队是如何计划使用这些库的...
- Fabric 2.6.1 (current latest version is 2.6.3) 是软件包的最后一个已知（稳定）版本，其中核心部分 (CSS) 和组件部分（JS 组件）在一起。基本上当你安装这个版本时，你会按原样使用它。不需要任何其他包。事实上你不能在上面安装不同的核心版本或 JS 版本，你会破坏包的完整性（这是你观察到的）
- 下一个开发和主要版本完全不同。该包将 "JS components" 部分分开并成为“Office UI Fabric Core". this package is nothing else as set of CSS styles to make your custom app look like Office itself. The current Core Package should be used on its own (basically you have ms_ styles to use at your convenience) or in the couple with "Office UI Fabric JS”。
- 最后，新包“Office UI Fabric JS”是一组 JS 组件（以前包含在 2.6.1 包中），当您想要 "styled" 组件时，应该使用这些组件看起来像 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 团队看起来像一群年轻人，他们正在努力，但经验运气会破坏一切。这不是我们以前从 Microsoft 看到的世界 class 软件。
Slava 描述的是正确的。
作为替代方案，您可以在您的项目中从 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 一起使用。
我想分享我最近使用 Office 加载项 JS 库的经验。
ATM，Office 365插件的前端部分有两种开发方式：
- 一个使用 office-ui-fabric-react 库的 ReactJS 应用程序。这是构建加载项的推荐方法，因为它是一个具有所有适当样式和良好组件的最新项目。
- 您自己的应用具有来自 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 的 CSS/SASS 样式。
我不建议将 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) 与旧版本 office-ui-fabric-core 中的 CSS 一起使用，它似乎已被废弃。
其他方式而言officially recommended:
- AngularJS库(ng-officeuifabric) is officially "in archive mode”。没有支持Angular的迹象。
- iOS project已经2年没更新了（虽然之前没显示多少生命）