基本的な Fluent UI コンポーネントを使用してMicrosoft Teams アプリを設計する

次の基本的な Fluent UI コンポーネントを使用して、Teams アプリを最初から設計および構築できます。 これらのコンポーネントは、可能な限りフラットに設計されており、さまざまなユース ケース、テーマ、画面サイズで機能します。

このページの図は、Teams の既定 (明るい) テーマとダーク テーマでのコンポーネントの外観を示しています。

Microsoft Teams UI Kit

Fluent UI React コンポーネントに基づいて、Microsoft Teams UI Kit には、Teams アプリをビルドするために特別に設計されたコンポーネントとパターンが含まれています。 UI キットでは、ここに記載されているコンポーネントを直接デザインに取り込んで挿入し、各コンポーネントの使用方法の他の例を確認できます。

Microsoft Teams UI キット (Figma) を取得します。

通知

ボタン

Breadcrumb

カード

カルーセル

チェックボックス

Coachmark

コンテキスト メニュー

ダイアログ

Dropdown

グループリスト

Hyperlink

Input

キーと値のペア

Paragraph

ピッカー

ピボット

進行状況インジケーター

Radio

スクロール バー

検索ボックス

サイド パネル

状態ラベル

トースト

Toggle

注: Fluent UI では、トグルはチェックボックスの一種です。

ヒント

その他のリソース

ここに一覧表示されている一部のコンポーネントとMicrosoft Teams UI Kit のコード サンプルと実装の詳細を取得します。

Fluent UI React コンポーネントを試す