Office UI Fabric JS 对话框组件

Question

我目前正在使用 Office-UI-Fabric-JS 为 Outlook Web 插件构建 UI。我最终会切换到 React。

我已经查看了示例，但我不清楚的是对话框的 HTML 位于何处？

从 TaskPane 调用 Fabric 对话框的 "open" API 使对话框在 TaskPane 中居中。我希望它位于屏幕中央。

但是，我不确定对话框的 HTML 应该放在哪里？

我是否将其放入非UI Html 文件("FunctionFile.html")，然后使用div 标签？

我是否创建一个完全独立的 HTML 页面，然后使用 Javascript 加载该 HTML (window.location = "mydialog.html")？

这里有一个示例（这个 HTML 会去哪里？）

    <div class="docs-DialogExample-default">
      <div class="ms-Dialog">
        <div class="ms-Dialog-title">All emails together</div>
          <div class="ms-Dialog-content">
            <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
          <div class="ms-CheckBox">
         <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
        <label role="checkbox" ...>
          <span class="ms-Label">Option1</span> 
        </label>
      </div>
      <div class="ms-CheckBox">
        <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
        <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-       checked="false" name="checkboxa">
          <span class="ms-Label">Option2</span> 
        </label>
      </div>
    </div>
    <div class="ms-Dialog-actions">
      <button class="ms-Button ms-Dialog-action ms-Button--primary">
        <span class="ms-Button-label">Save</span> 
      </button>
      <button class="ms-Button ms-Dialog-action">
        <span class="ms-Button-label">Cancel</span> 
      </button>
    </div>
  </div>
    <button class="ms-Button docs-DialogExample-button">Open Dialog</button>
    <label class="docs-DialogExample-label"></label>
  </div>

Answer 1

要从 Web 插件打开对话框，请使用 Office.js 提供的 displayDialogAsync API。可以在此处找到一些其他文档：

https://docs.microsoft.com/en-us/office/dev/add-ins/develop/dialog-api-in-office-add-ins

Office UI Fabric JS 对话框组件

Office UI Fabric JS Dialog Component

office-addins

office-ui-fabric

outlook-web-addins