辦公室UI織物庫的CSS奇怪

我正在使用Word 2016外接程序項目，我在使用Office UI Fabric庫時遇到了一些困難。辦公室UI織物庫的CSS奇怪

基本上我想給我的外接官方Office外觀&的感覺，所以我認爲Office UI Fabric將是最好的選擇，與Fabric javascript組件一樣，就像下拉菜單等一樣。

我安裝了這兩個包的NuGet：OfficeUIFabric 2.6.3和OfficeUIFabricJS 1.4.0，然後我添加了一些組件到頁面，通過使用這些CSS類：「MS-下拉」，「MS-ChoiceField 「和一些圖標類，如」ms-Icon - 設置「。

這些都是我在的（奇數）結果：

OfficeUIFabric和OfficeUIFabricJS船兩個不同版本的同一個「fabric.components.css」的文件，因此最終結果取決於順序安裝這兩個軟件包。
與來自OfficeUIFabric 2.6.3的「fabric.components.css」，所有圖標都丟失，但ChoiceField的樣式正確。
帶有來自OfficeUIFabricJS 1.4.0的「fabric.components.css」，圖標是可見的，但下拉按鈕正在矩形文本框之外繪製，並且ChoicheField的樣式錯誤（標籤包裝和複選框是標準HTML控件）。

你對這些庫有什麼經驗嗎？我即將切換到一個更舒適的框架，如Bootstrap或類似的...

來源

2017-03-16 jeanie77

你對這些庫有什麼經驗嗎？

是的;）如果這是你的問題。

這些都是我在的（奇數）結果...

我驚訝你得到任何結果的。 OfficeUIFabric庫使用不正確的問題。讓我澄清一下背後的團隊如何計劃對這些庫的使用...

Fabric 2.6.1（目前的最新版本是2.6.3）是包的最後已知的（穩定）版本，其中最核心的部分（CSS）和組件的一部分（JS組件）在一起。基本上，當你安裝這個版本時，你會按原樣使用它。不需要任何其他包。事實上，你不能安裝在頂部不同的核心版本或JS版本，你會剎車包裝完整性（這是你觀察）
下一個發展和主要版本是完全不同的。該包將「JS組件」分開，併成爲「Office UI Fabric Core」。這個軟件包不是別的一套CSS樣式，使您的自定義應用看起來像Office本身。當前的核心軟件包應該自己使用（基本上你有方便使用的ms_樣式），或者在「Office UI Fabric JS」的情侶中使用。
最後，當你想擁有看起來像Office本地組件的「樣式」組件時，應該使用新組件「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。毫無進攻的微軟團隊，但布克團隊看起來像一羣十幾歲的青少年，他們正在盡全力，但經驗的運氣會破壞一切。這不是我們以前從微軟看到的世界級軟件。

來源

2017-03-16 17:32:46

伊凡諾夫，我完全同意你面料混亂的情況。你在Fabric和Fabric-distribution網站上的解釋並不那麼清楚（OfficeUIFabricJS的NuGet項目描述是說沒有依賴關係，雖然事實證明它取決於Core！），謝謝指出我正確的方向。但它還不完全清楚。根據你的解釋，我的項目應該只引用完整的包，OfficeUIFabric。但是如果我這樣做，所有圖標和下拉控件都將消失。所以它不是那麼「完整」...... – jeanie77

@ jeanie77你沒有清楚地告訴你最終會使用什麼？它是2.6.3還是JS 1.4.0 + Core 5.0.1？無論如何，你再次混合這些解決方案。 1.如果你使用1.4.0 + 5.0.1所有的圖標和控件應該到位。如果沒有參考[文檔]（https://dev.office.com/fabric#/styles/icons）或包含在每個組件中的文檔。 2.如果您最終只使用2.6.3版本，請從先前安裝的軟件包中清理您的解決方案並從頭開始安裝。要使用樣式，請參閱** ONLY **將文檔包含到組件和CSS下載中。 Internet資源**無效** for 2.6.3 ver。 –

我試過只使用OfficeUIFabric 2.6.3，首先清理所有Fabric庫，然後只添加2.6.3（不是從CDN，我使用NuGet軟件包）。我有報道的行爲：所有圖標和下拉列表都沒有了。 – jeanie77

斯拉瓦所描述的是正確的。

作爲替代方案，您是否可以在項目中從CDN引用Fabric？如果引用CDN是（而不是安裝的NuGet包）爲您的選項，然後按照這個主題，從CDN引用面料： Use Office UI Fabric in Office Add-ins

對CDN的文件已建在一起，這樣的版本號匹配。另外，由於Fabric JS使用Fabric Core，Fabric Core的正確版本與Fabric JS文件一起部署。所以你不必猜測Fabric Core的哪個版本應該用於更新版本的Fabric JS。

來源

2017-03-16 19:33:04

我無法使用在線版本，因爲我正在構建一個無需外部資源即可工作的組件。無論如何，問題仍然是瞭解應該使用哪個庫來查看圖標和其他js組件......以及Fabric JS是包含還是依賴於Core。在線版本應該遵循與離線相同的規範，也許它們在版本上有所不同......但僅此而已。 – jeanie77

辦公室UI織物庫的CSS奇怪

回答

相關問題