„Fabric Core“ in Office-Add-Ins

Wenn Sie ein Nicht-React Office-Add-In erstellen, bietet Ihnen Fabric Core vorgefertigte CSS-Klassen und Sass-Mixins für Symbole, Farben, Typografie und responsive Raster, die alle auf die Fluent UI-Designsprache abgestimmt sind. Da es frameworkunabhängig ist, können Sie Fabric Core mit jeder Single-Page-Anwendung oder jedem serverseitigen Web-UI-Framework verwenden. (Aus historischen Gründen heißt er "Stoffkern" statt "Fluent Core".)

Hinweis

In diesem Artikel wird die Verwendung von Fabric Core im Kontext von Office-Add-Ins beschrieben, aber es wird 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

Während Fabric Core die empfohlene Bibliothek zum Entwerfen von Nicht-React-Add-Ins ist, arbeitet das Team an Fluent UI Web Components, um eine neuere Lösung bereitzustellen. Die auf FAST basierende Fluent UI-Webkomponentenbibliothek 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 freuen uns über Feedback zu Ihrer Erfahrung über GitHub.

Fabric Core verwenden: Symbole, Schriftarten, Farben

Fügen Sie zunächst das Fabric Core Stylesheet zu Ihrem Add-In hinzu und wenden Sie dann CSS-Klassen für Symbole, Schriftarten und Farben an.

Hinzufügen des Stylesheets

Fügen Sie den CDN-Verweis (Content Delivery Network) von Fabric Core zu Ihrer <head> HTML-Seite 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">

Verwenden von Symbolen

Um ein Fabric Core-Symbol zu verwenden, fügen Sie ein <i> Element hinzu und wenden Sie die entsprechenden CSS-Klassen an. Sie steuern die Größe des Symbols mit Schriftgrößenklassen und die Farbe mit Farbklassen. Im folgenden Beispiel wird ein sehr großes Tabellensymbol in der Design-Primärfarbe (#0078d7) gerendert.

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

Das Klassenmuster ist ms-Icon--<IconName>. Informationen zum Durchsuchen verfügbarer Symbole und deren Namen finden Sie unter Fluent UI-Symbole. Wenn Sie ein zu verwendendes Symbol finden, stellen Sie dem Symbolnamen das Präfix voran ms-Icon--.

Verwenden von Schriftarten und Farben

Fabric Core stellt CSS-Klassen für Segoe-UI-Schriftgrößen (ms-font-s, ms-font-m, ms-font-l, ms-font-xlund andere) und designfähige Farben (ms-fontColor-themePrimary, ms-fontColor-neutralSecondary, und andere) bereit. Im folgenden Beispiel wird ein großer Schriftgrad und die Farbe des primären Designs auf eine Überschrift angewendet.

<h2 class="ms-font-l ms-fontColor-themePrimary">Sales by region</h2>
<p class="ms-font-m ms-fontColor-neutralSecondary">Updated quarterly.</p>

Die vollständige Liste der verfügbaren Größen finden Sie unter Typografie. Designbezogene und neutrale Farben finden Sie unter Farben.

Verwenden von Office UI Fabric JS-Komponenten

Wenn Ihr Nicht-React-Add-In interaktive Benutzeroberflächenkomponenten benötigt – Schaltflächen, Dialogfelder, Dropdowns, Auswahlen und mehr –, können Sie Office UI Fabric JS verwenden. Diese Bibliothek bietet vorgefertigte, gestylte Komponenten, die der Office-Designsprache entsprechen, ohne dass React erforderlich ist.

Um eine Komponente zu verwenden, verweisen Sie in Ihrem HTML-Code auf das Fabric JS-Skript und das Stylesheet und initialisieren Sie dann die Komponente in JavaScript. In der INFODATEI des Repositorys finden Sie Setupanweisungen und die vollständige Komponentenliste.

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 weiterhin verwenden, um zu lernen, wie Sie Fabric Core- und Fabric UI-Komponenten anwenden.

Siehe auch

  • Last updated on