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

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

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

Примечание

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

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

  1. Добавьте ссылку CDN в HTML-код на своей странице.

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/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 UI Icons. Чтобы найти дополнительные значки, доступные в Fabric Core, используйте функцию поиска на этой странице. Когда вы найдете значок для надстройки, добавьте к его имени префикс ms-Icon--.

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

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

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

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

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

Примеры

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