Fabric Core в надстройках Office

  • Статья

Fabric Core — это коллекция классов CSS и наборов Sass с открытым кодом, которая предназначена для использования в надстройках Office, отличных от React. Fabric Core содержит основные элементы языка дизайна пользовательского интерфейса Fluent, такие как значки, цвета, шрифты и сетки. Структура Core не зависит от платформы, поэтому ее можно использовать с любым одностраничным приложением или любой серверной платформой веб-интерфейса. (Он называется "Fabric Core" вместо "Fluent Core" по историческим причинам.)

Если пользовательский интерфейс надстройки не основан на React, можно также использовать набор компонентов, не React. См. раздел Использование компонентов Office UI Fabric JS.

Примечание.

В этой статье описывается использование Fabric Core в контексте надстроек Office, но он также используется в широком спектре приложений и расширений Microsoft 365. Дополнительные сведения см. в разделе Fabric Core и репозиторий открытый код Office UI Fabric Core.

Примечание.

Хотя fabric Core является рекомендуемой библиотекой для разработки надстроек, не React, команда работает над веб-компонентами пользовательского интерфейса Fluent, чтобы предоставить более новое решение. Созданная на базе FAST библиотека веб-компонентов пользовательского интерфейса Fluent позволяет использовать, настраивать и создавать веб-компоненты для создания более современного пользовательского интерфейса на основе стандартов. Мы приглашаем вас протестировать эту библиотеку, выполнив краткий запуск и приветствуя отзыв о вашем опыте через GitHub.

Использование Fabric Core: значки, шрифты, цвета

  1. Добавьте ссылку на сеть доставки содержимого (CDN) на HTML-код на странице.

    <link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.0.0/css/fabric.min.css">

  2. Используйте значки и шрифты Fabric Core.

    Чтобы использовать значок Fabric Core, добавьте элемент "i" на страницу, а затем составьте ссылку на соответствующие классы. Вы можете изменять размер значка, изменяя размер шрифта. Например, ниже показано, как сделать очень большой значок таблицы, который использует цвет themePrimary (#0078d7).

    <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

    Дополнительные инструкции см. в разделе Значки пользовательского интерфейса Fluent. Чтобы найти дополнительные значки, доступные в Fabric Core, используйте функцию поиска на этой странице. Когда вы найдете значок для надстройки, добавьте к его имени префикс ms-Icon--.

    Сведения о размерах и цветах шрифтов, доступных в Fabric Core, см. в разделе Типография и оглавление цветов в разделе Цвета.

Примеры включены в примеры далее в этой статье.

Использование компонентов Office UI Fabric JS

Надстройки с пользовательскими интерфейсами, не React, также могут использовать любой из множества компонентов Office UI Fabric JS, включая кнопки, диалоговые окна, средства выбора и многое другое. Инструкции см. в средстве чтения репозитория.

Примеры включены в примеры далее в этой статье.

Примеры

В следующих примерах надстроек используются компоненты Fabric Core и (или) Office UI Fabric JS. Некоторые из этих репозиториев архивируются, что означает, что они больше не обновляются с помощью ошибок или исправлений безопасности, но вы по-прежнему можете использовать их, чтобы узнать, как использовать компоненты Fabric Core и пользовательского интерфейса Fabric.