Freigeben über

„Fabric Core“ in Office-Add-Ins

  • Artikel

Fabric Core ist eine Open-Source-Sammlung von CSS-Klassen und Sass-Mixins, die für die Verwendung in Nicht-React Office-Add-Ins vorgesehen ist. Fabric Core enthält grundlegende Elemente der Designsprache der Fluent-Benutzeroberfläche, z. B. Symbole, Farben, Schriftarten und Raster. Fabric Core ist frameworkunabhängig, sodass es mit jeder Single-Page-Anwendung oder jedem serverseitigen Webbenutzeroberfläche-Framework verwendet werden kann. (Es wird aus historischen Gründen "Fabric Core" anstelle von "Fluent Core" genannt.)

Wenn die Benutzeroberfläche Ihres Add-Ins nicht React basiert, können Sie auch eine Reihe von nicht React Komponenten verwenden. Weitere Informationen finden Sie unter Verwenden von Office UI Fabric JS-Komponenten.

Hinweis

Dieser Artikel beschreibt die Verwendung von Fabric Core im Kontext von Office-Add-Ins, wird aber auch in einer Vielzahl von Microsoft 365-Apps und -Erweiterungen verwendet. Weitere Informationen finden Sie unter Fabric Core und das Open Source Repository Office UI Fabric Core.

Hinweis

Fabric Core ist zwar die empfohlene Bibliothek zum Entwerfen nicht React Add-Ins, das Team arbeitet jedoch an Fluent UI-Webkomponenten, um eine neuere Lösung bereitzustellen. Die Fluent UI Web Components-Bibliothek basiert auf FAST und ermöglicht es Ihnen, Webkomponenten zu verwenden, anzupassen und zu erstellen, um eine modernere und standardbasierte Benutzeroberfläche zu erstellen. Wir laden Sie ein, diese Bibliothek zu testen, indem Sie den Schnellstart abschließen und Feedback zu Ihrer Erfahrung über GitHub begrüßen.

Fabric Core verwenden: Symbole, Schriftarten, Farben

  1. Fügen Sie dem HTML-Code auf Ihrer Seite den CDN-Verweis (Content Delivery Network) hinzu.

    <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. Verwenden Sie Fabric Core-Symbole und -Schriftarten.

    Um ein Fabric Core-Symbol zu verwenden, schließen Sie das Element "i" auf Ihrer Seite ein, und verweisen Sie dann auf die entsprechenden Klassen. Sie können die Größe des Symbols steuern, indem Sie den Schriftgrad ändern. Der folgende Code zeigt beispielsweise, wie Sie ein sehr großes Tabellensymbol erstellen, das die Farbe „themePrimary (#0078d7)“ verwendet.

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

    Ausführlichere Anweisungen finden Sie unter Fluent-UI-Symbole. Um weitere Symbole zu finden, die in Fabric Core verfügbar sind, verwenden Sie die Suchfunktion auf dieser Seite. Wenn Sie ein Symbol finden, das Sie in Ihrem Add-In verwenden möchten, müssen Sie unbedingt ms-Icon-- dem Symbolnamen voranstellen.

    Informationen zu Schriftgraden und Farben, die in Fabric Core verfügbar sind, finden Sie unter Typografie und das Inhaltsverzeichnis Farben unter Farben.

Beispiele finden Sie in den Beispielen weiter unten in diesem Artikel.

Verwenden von Office UI Fabric JS-Komponenten

Add-Ins mit Nicht-React-Benutzeroberflächen können auch eine der vielen Komponenten von Office UI Fabric JS verwenden, einschließlich Schaltflächen, Dialogfeldern, Auswahlern und mehr. Anweisungen finden Sie in der Infodatei des Repositorys.

Beispiele finden Sie in den Beispielen weiter unten in diesem Artikel.

Beispiele

Die folgenden Beispiel-Add-Ins verwenden Fabric Core- und/oder Office UI Fabric JS-Komponenten. Einige dieser Repositorys werden archiviert, was bedeutet, dass sie nicht mehr mit Fehler- oder Sicherheitskorrekturen aktualisiert werden, aber Sie können sie trotzdem verwenden, um zu erfahren, wie Sie Fabric Core- und Fabric-UI-Komponenten verwenden.