Office-UI-Toolkit für Add-Ins und Web-Apps

  • Artikel

Zuletzt geändert: 28. September 2015

Gilt für: Office 365 | Office-Add-Ins | SharePoint-Add-Ins

Beim Entwerfen und Erstellen von Web-Apps für Office 365 oder -Add-Ins für Office und SharePoint können Sie das Office-UI-Toolkit verwenden, um die Benutzeroberfläche wie in Office zu gestalten. Das Office-UI-Toolkit enthält wichtige Plug & Play-Komponenten,mit denen Weboberflächen einfacher erstellt werden können, über die eine Verbindung zu Office hergestellt und eine Integration in Office erfolgen kann, einschließlich:

Hinweis: Obwohl wir Ihnen empfehlen, das Office-UI-Toolkit anzupassen, können Sie auch ein beliebiges anderes Framework verwenden. Tatsächlich wurde das Toolkit für die Verwendung mit anderen gängigen Frameworks wie Bootstrap konzipiert.

Office-UI-Fabric

Das Open-Source-Projekt der Office-UI-Fabric bietet Komponenten, mit denen Sie die Office-Oberfläche in Ihren Web-Apps und -Add-Ins erstellen können, dazu gehören:

  • Formatvorlagen für Farben, Animationen und grundlegende Designs von HTML-Steuerelementen (Eingabefelder, Schaltflächen und mehr).

  • Beispiele für HTML- und JavaScript-Vorlagen, anhand derer Sie erfahren, wie Sie Formatvorlagen und Add-In-Verhalten hinzufügen.

  • Schriftarten für Typografie und Symboldarstellung.

    Hinweis: Schriftarten selbst sind nicht Open Source, können jedoch aus CDN in Ihren Office-Apps und Add-Ins auf solche verweisen. Bei Fragen zur lizenzierten Verwendung von Schriftarten lesen Sie den Artikel Lizenz

Standardmäßig enthält die Office-UI-Fabric keine Datenquellen oder Datenbindungsframeworks. Das bedeutet, dass Sie Fabric verwenden, und es in jedes Steuerelement und allen Datenquellen einbinden können, die Sie in Ihren Office-gestützten Web-Apps oder -Add-Ins benötigen.

Lesen Sie für einen Einstieg in die Thematik folgende Informationen:

Informationen über die Office-UI-Fabric und SharePoint-Add-Ins finden Sie unter UX-Richtlinien für SharePoint-Add-Ins.

Office JavaScript-Steuerelemente

Wenn Ihre Anwendung eine Verbindung zu Office-Diensten herstellen muss oder Sie eine Benutzeroberfläche bereitstellen, die fast identisch mit der von Office ist, können Sie die Office-JavaScript-Steuerelemente verwenden. Hierbei handelt es sich um sofort einsatzbereite Steuerelemente, die bereits so eingerichtet sind, dass sie mit Office 365 funktionieren. Dazu müssen Sie nur auf die Steuerelementdateien verweisen und sie konfigurieren.

Weitere Informationen hierzu finden Sie unter Office 365-JavaScript-Steuerelemente.

Office Voice

Es wird empfohlen, dass Sie die Sprache und den Ton der Office-Benutzeroberfläche mit dem Benutzeroberflächentext Ihrer Web-App oder dem Add-In abgleichen. Weitere Informationen hierzu finden Sie unter Office Voice.

Barrierefreie Apps und Add-Ins

Um sicherzustellen, dass alle potenziellen Benutzer Ihre Apps und Add-Ins erfolgreich verwenden können, sollten Sie sie für alle Zielgruppen zugänglich machen. Dies umfasst die einfache Verwendung, das Entwerfen für alle Eingabemethoden und die Berücksichtigung der Verwendung von Hilfstechnologien in Ihrem App- oder Add-In-Design. Weitere Informationen finden Sie unter Erstellen von barrierefreien Apps und Add-Ins.

Zusätzliche Ressourcen