Office 加载项中的 Fabric Core

  • 项目

Fabric Core 是 CSS 类和 Sass 混合的开源集合，适用于非React Office 加载项。Fabric Core 包含 Fluent UI 设计语言的基本元素，例如图标、颜色、字体和网格。 Fabric Core 独立于框架，因此可用于任何单页应用程序或任何服务器端 Web UI 框架。 (出于历史原因，它被称为“Fabric Core”而不是“Fluent Core”。)

如果外接程序的 UI 不是基于React，则还可以使用一组非React组件。 请参阅使用 Office UI Fabric JS 组件。

注意

本文介绍在 Office 加载项上下文中使用 Fabric Core，但它也用于各种 Microsoft 365 应用和扩展。 有关详细信息，请参阅 Fabric Core 和 开放源代码 存储库 Office UI Fabric Core。

注意

虽然建议使用 Fabric Core 来设计非React加载项，但团队正在开发 Fluent UI Web 组件来提供较新的解决方案。 Fluent UI Web 组件库基于 FAST 构建，允许使用、自定义和生成 Web 组件来创建更现代且基于标准的 UI。 我们邀请你通过 完成快速入门 并欢迎通过 GitHub 提供有关体验的反馈来测试此库。

使用 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 图标。 若要查找 Fabric Core 中可用的更多图标，请使用该页面上的搜索功能。 找到要在外接程序中使用的图标后，请务必在图标名称前加上前缀 ms-Icon--。

    有关 Fabric Core 中可用的字体大小和颜色的信息，请参阅 Colors 中的版式和颜色目录。

示例包含在本文后面的 示例中 。

使用 Office UI Fabric JS 组件

具有非React UI 的外接程序还可以使用 Office UI Fabric JS 中的任意多个组件，包括按钮、对话框、选取器等。 有关说明，请参阅存储库的自述文件。

示例包含在本文后面的 示例中 。

示例

以下示例加载项使用 Fabric Core 和/或 Office UI Fabric JS 组件。 其中一些存储库已存档，这意味着它们不再使用 bug 或安全修补程序进行更新，但你仍然可以使用它们来了解如何使用 Fabric Core 和 Fabric UI 组件。