Office UI Fabric库的CSS异常 [英] CSS oddities with Office UI Fabric libraries

问题描述

我正在处理Word 2016外接程序项目，使用Office UI Fabric库时遇到了一些困难.

I'm working on a Word 2016 Add-in project and I'm having some difficulties using Office UI Fabric libraries.

基本上，我想给外接程序提供Office的正式外观&感觉，因此我认为Office UI Fabric与Fabric javascript组件(例如下拉菜单等)结合将是最佳选择.

Basically I would like to give my Add-in the official Office look & feel, so I thought that Office UI Fabric would be the best choice, in conjunction with Fabric javascript components, like dropdown menus and so on.

我安装了以下两个NuGet软件包: OfficeUIFabric 2.6.3 和 OfficeUIFabricJS 1.4.0 ，然后使用以下CSS类将一些组件添加到页面中: ms-Dropdown"，"ms-ChoiceField"和一些图标类，例如"ms-Icon--Settings".

I installed these two NuGet packages: OfficeUIFabric 2.6.3 and OfficeUIFabricJS 1.4.0, then I added some components to a page, by using these css classes: "ms-Dropdown", "ms-ChoiceField" and some icon classes, like "ms-Icon--Settings".

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

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

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

• OfficeUIFabric and OfficeUIFabricJS ship two different versions of the same "fabric.components.css" file, so the final result depends on the order on which these two packages are installed.

具有来自OfficeUIFabric 2.6.3的"fabric.components.css"，所有图标均丢失，但ChoiceField的样式正确.

with "fabric.components.css" coming from OfficeUIFabric 2.6.3, all icons are missing but ChoiceField is styled correctly.

，带有来自OfficeUIFabricJS 1.4.0的"fabric.components.css"，图标可见，但是下拉按钮在矩形文本框外绘制，并且ChoicheField的样式错误(标签环绕，复选框为标准HTML控制).

with "fabric.components.css" coming from OfficeUIFabricJS 1.4.0, icons are visible, but dropdown button is being drawn outside the rectangular textbox and ChoicheField's style is wrong (the label wraps and checkbox is a standard HTML control).

您对这些库有任何经验吗? 我将改用更舒适的框架，例如Bootstrap或类似的文件...

Do you have any experience with these libraries? I'm about to switch to a more comfortable framework, like Bootstrap or similar...

推荐答案

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

Do you have any experience with these libraries?

是;)如果这是您的问题.

Yes ;) If this is your question.

这些是我得到的(奇数)结果...

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

令我惊讶的是，您根本没有得到任何结果. OfficeUIFabric库使用不正确的问题.让我澄清一下背后的团队如何计划这些库的使用...

I surprise you are getting any results at all. The issue with incorrect usage of OfficeUIFabric libraries. Let me clarify how team behind planned on the usage of these libraries ...

• 结构2.6.1 (当前最新版本为 2.6.3 )是包的最后一个已知(稳定)版本，其中核心部分(CSS)和组件部分(JS组件)在一起.基本上，当您安装此版本时，将按原样使用它.无需任何其他软件包.实际上，您不能在顶部安装其他核心版本或JS版本，这将破坏软件包的完整性(这是您观察到的)
• 下一个开发和主要发行版本完全不同.程序包将单独的"JS组件"部分变成" Office UI Fabric Core " .此程序包仅作为CSS样式集而已，可以使您的自定义应用看起来像Office本身.当前的核心程序包应单独使用(基本上，您可以根据需要使用ms_样式)，或与"
• 最后，新包" Office UI Fabric JS 已设置.当您想要具有类似于Office本机组件的样式化"组件时，应使用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 (current latest version is 2.6.3) is last known (stable) version of the package where the Core part (CSS) and components part (JS components) where together. Basically when you install this version, you would use it as is. No need for any other packages. In fact you cannot install on the top Different core version or JS version, you will brake the package integrity (which is that you observe)
• Next development and major release was absolutely different. The package separate "JS components" part and become "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".
• 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.

我希望这能为您或困惑的人澄清一些东西.我们相信从版本1开始使用Fabric软件包，并尝试2.6.1和新的1.4.0 + 5.0.1.有很多问题，太多事情乱七八糟.我们不能花太多时间仅仅拥有新的外观.基本上，通过一些调整，我们停止了2.6.1版本，并且至少暂时不会使用新的Fabric.如果我愿意返回并再次选择UI包，那么我就不会选择Fabric，而是使用JQuery UI或JQuery Mobile.微软团队没有冒犯，但是Fabric团队看起来像一群十几岁的孩子，他们正在尽力而为，但是经验的运气破坏了一切.这不是我们以前从Microsoft看到的世界一流的软件.

I hope this is clarify something for you or someone who puzzled as well. We work with Fabric package I believe from version one and try both 2.6.1 and new 1.4.0+5.0.1. There are a lot of issues, too many things out of order. We cannot afford to spend so much time just to have new slick look. Basically with some tweaks we stopped on 2.6.1 version and will not go with new Fabric at least for now. If I would have luxury to go back and choose again on the UI package, I would not go with Fabric, indeed, instead would use JQuery UI or JQuery Mobile. No offence to Microsoft team, but Fabric team is looks like bunch of teenagers, who is trying their best, but the luck of experience spoil everything. This is not world class software as we used to see from Microsoft.

这篇关于Office UI Fabric库的CSS异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！