Question

我目前正在使用Office-UI-Fabric-JS构建Outlook Web加载项的UI。我最终将切换到React。

我已经遍历了示例，但不清楚的是对话框HTML将从何处驻留？

从TaskPane调用Fabric对话框的“开放” API可使Dialog在TaskPane中居中。我希望它集中在屏幕上。

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

我是否将其放入非UI Html文件（“ FunctionFile.html”）中，然后使用div标签？

我是否创建一个完全独立的HTML页面，然后使用Javascript（window.location =“ mydialog.html”）加载该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对话框组件

1 个答案: