Entwerfen Ihrer Microsoft Teams-App mit grundlegenden Fluent-UI-Komponenten

Sie können Ihre Teams-App mit den folgenden grundlegenden Fluent-UI-Komponenten von Grund auf entwerfen und erstellen. Diese Komponenten sind so flach wie möglich konzipiert und können für verschiedene Anwendungsfälle, Designs und Bildschirmgrößen verwendet werden.

Die Abbildungen auf dieser Seite zeigen, wie Komponenten in Teams-Standarddesigns (hell) und dunkel aussehen.

Microsoft Teams-UI-Kit

Basierend auf Fluent UI React-Komponenten enthält das Microsoft Teams UI Kit Komponenten und Muster, die speziell für die Erstellung von Teams-Apps entwickelt wurden. Im UI-Kit können Sie die hier aufgeführten Komponenten direkt in Ihr Design einfügen und weitere Beispiele für die Verwendung der einzelnen Komponenten anzeigen.

Holen Sie sich das Microsoft Teams UI Kit (Figma).

Warnung

Schaltfläche

Breadcrumb

Karte

Karussell

Kontrollkästchen

Coachmark

Kontextmenü

Dialogfeld

Dropdown

Gruppenliste

Hyperlink

Input

Schlüssel-Wert-Paar

Absatz

Picker

Pivot

Statusanzeige

Radio

Scrollbar

Suchfeld

Seitenbereich

Statusbezeichnung

Popup

Umschaltfläche

Hinweis: In der Fluent-Benutzeroberfläche ist das Umschalten ein Kontrollkästchen.

Tooltip

Sonstige Ressourcen

Erhalten Sie Codebeispiele und Implementierungsdetails für einige der komponenten, die hier und im Microsoft Teams UI Kit aufgeführt sind.

Testen der React-Komponenten der Fluent-Benutzeroberfläche