Office UI Fabric 未在我的 Excel 插件项目中呈现
Office UI Fabric doesn't render in my Excel Addin project
从 VS 2017 开始,我创建了一个新的 Excel 插件。在 Home.html
中,就在 <div class="footer">
之前,我添加了 this Microsoft template 中的以下部分:
<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
head:
<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">
当我运行这个项目时,我进入任务面板:
然而,我期待的是:
逻辑有什么问题?如果我使用 Fabric 的 CSS 和代码模板手动创建一个 HTML 文件,它可以很好地呈现,但这在我的 Excel Addin 项目中不起作用。
您确实包含了非常旧版本的结构,但是当前版本使用网站上的示例。 Get started explains you where to get the fabric-ui-core (styles) and fabric-ui-js(组件)到 运行 来自网站的示例正确。
如果您不解为什么包含的版本 2.1.0 比 1.4.0 旧,请参阅此解释:
从 VS 2017 开始,我创建了一个新的 Excel 插件。在 Home.html
中,就在 <div class="footer">
之前,我添加了 this Microsoft template 中的以下部分:
<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
head:
<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">
当我运行这个项目时,我进入任务面板:
然而,我期待的是:
逻辑有什么问题?如果我使用 Fabric 的 CSS 和代码模板手动创建一个 HTML 文件,它可以很好地呈现,但这在我的 Excel Addin 项目中不起作用。
您确实包含了非常旧版本的结构,但是当前版本使用网站上的示例。 Get started explains you where to get the fabric-ui-core (styles) and fabric-ui-js(组件)到 运行 来自网站的示例正确。
如果您不解为什么包含的版本 2.1.0 比 1.4.0 旧,请参阅此解释: