2017-06-13 25 views
0

從VS 2017開始,我創建了一個新的Excel Addin。在Home.html,只是<div class="footer">之前,我添加了以下部分從this Microsoft template我的Excel Addin項目中沒有渲染Office UI Fabric

<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup"> 
    <div class="ms-ChoiceFieldGroup-title"> 
     <label class="ms-Label is-required">Unselected</label> 
    </div> 
    <ul class="ms-ChoiceFieldGroup-list"> 
     <li class="ms-RadioButton"> 
      <input tabindex="-1" type="radio" class="ms-RadioButton-input"> 
      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup"> 
       <span class="ms-Label">Option 1</span> 
      </label> 
     </li> 
     <li class="ms-RadioButton"> 
      <input tabindex="-1" type="radio" class="ms-RadioButton-input"> 
      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup"> 
       <span class="ms-Label">Option 2</span> 
      </label> 
     </li> 
     <li class="ms-RadioButton"> 
      <input tabindex="-1" type="radio" class="ms-RadioButton-input"> 
      <label role="radio" class="ms-RadioButton-field is-disabled" tabindex="0" aria-checked="false" name="choicefieldgroup" aria-disabled="true"> 
       <span class="ms-Label">Option 3</span> 
      </label> 
     </li> 
     <li class="ms-RadioButton"> 
      <input tabindex="-1" type="radio" class="ms-RadioButton-input"> 
      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup"> 
       <span class="ms-Label">Option 4</span> 
      </label> 
     </li> 
    </ul> 
</div> 

我應該注意到我確認這些引用是Home.html頭:

<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css"> 
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css"> 

當我運行這個項目,我得到在任務窗格:

enter image description here

不過,我期待荷蘭國際集團這樣的:

enter image description here

有什麼不對的邏輯?如果我使用Fabric的CSS和代碼模板手動創建HTML文件,則渲染效果良好,但在我的Excel Addin項目中不起作用。

回答

1

實際上,您已經包含非常舊的結構版本,但使用當前版本的網站示例。 Get started解釋了從何處獲取fabric-ui-core(樣式)和fabric-ui-js(組件)以正確運行網站示例。

如果你將自己的困惑爲什麼是包括2.1.0版本早於1.4.0,請參閱本解釋:CSS oddities with Office UI Fabric libraries

+0

這是地獄混亂。你的答案有助於解決我的問題,現在我將深入這個黑暗的世界,因爲我會堅持使用Fabric。 謝謝! –