Компонент диалогового окна Office UI Fabric JS - PullRequest
Новая
       17

Компонент диалогового окна Office UI Fabric JS

0 голосов
/ 12 февраля 2019

В настоящее время я использую Office-UI-Fabric-JS для создания пользовательского интерфейса для надстройки Outlook Web.В конце концов я переключусь на React.

Я просмотрел примеры, и мне неясно, откуда будет располагаться HTML-код для диалогового окна?

Вызов матрицы«Открытый» API диалога с панели задач центрирует диалог внутри панели задач.Мне бы хотелось, чтобы он был по центру экрана.

Однако я не уверен, куда должен идти HTML-код для диалога?

Поместить ли его в HTML-файл без пользовательского интерфейса ("FunctionFile.html "), затем использовать теги div?

Создать ли полностью отдельную HTML-страницу, а затем загрузить этот HTML-код с помощью Javascript (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>

1 Ответ

0 голосов
/ 12 февраля 2019

Чтобы открыть диалоговое окно из веб-надстройки, используйте API displayDialogAsync , предоставляемый Office.js.Некоторая дополнительная документация может быть найдена здесь:

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

...