Freigeben über


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.

Warnung

Das Beispiel zeigt eine Komponente der Warnungs-UI.

Schaltfläche

Das Beispiel zeigt eine Schaltflächen-UI-Komponente.

Beispiel zeigt eine Breadcrumb-UI-Komponente.

Karte

Das Beispiel zeigt eine Karte Ui-Komponente.

Das Beispiel zeigt eine Karussell-UI-Komponente.

Kontrollkästchen

Beispiel zeigt eine Kontrollkästchen-UI-Komponente.

Coachmark

Das Beispiel zeigt eine Coachmark-UI-Komponente.

Kontextmenü

Das Beispiel zeigt eine Kontextmenü-UI-Komponente.

Dialogfeld

Das Beispiel zeigt eine Dialog-UI-Komponente.

Das Beispiel zeigt eine Dropdown-UI-Komponente.

Gruppenliste

Das Beispiel zeigt eine Benutzeroberflächenkomponente für Gruppenlisten.

Beispiel zeigt eine Hyperlink-UI-Komponente.

Input

Beispiel zeigt eine Eingabe-UI-Komponente.

Schlüsselwertpaar

Beispiel zeigt eine Schlüssel-Wert-Paar-UI-Komponente.

Absatz

Beispiel für eine Absatz-UI-Komponente.

Kommissionierer

Beispiel zeigt eine Benutzeroberflächenkomponente für die Auswahl.

Pivot

Das Beispiel zeigt eine Pivot-UI-Komponente.

Statusanzeige

Das Beispiel zeigt eine Benutzeroberflächenkomponente für die Statusanzeige.

Radio

Das Beispiel zeigt eine Komponente der Radio-Ui.

Bildlaufleiste

Das Beispiel zeigt eine Benutzeroberflächenkomponente für die Bildlaufleiste.

Beispiel für eine Suchfeld-UI-Komponente.

Seitenbereich

Das Beispiel zeigt eine Seitenbereich-UI-Komponente.

Statusbezeichnung

Beispiel zeigt eine status Ui-Komponente.

Popup

Beispiel zeigt eine Popup-UI-Komponente.

Umschaltfläche

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

Das Beispiel zeigt eine Umschalter-UI-Komponente.

Tooltip

Das Beispiel zeigt eine QuickInfo-Ui-Komponente.

Sonstige Ressourcen

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