基本的な Fluent UI コンポーネントを使用してMicrosoft Teams アプリを設計する
次の基本的な Fluent UI コンポーネントを使用して、Teams アプリを最初から設計および構築できます。 これらのコンポーネントは、可能な限りフラットに設計されており、さまざまなユース ケース、テーマ、画面サイズで機能します。
このページの図は、Teams の既定 (明るい) テーマとダーク テーマでのコンポーネントの外観を示しています。
Microsoft Teams UI Kit
Fluent UI React コンポーネントに基づいて、Microsoft Teams UI Kit には、Teams アプリをビルドするために特別に設計されたコンポーネントとパターンが含まれています。 UI キットでは、ここに記載されているコンポーネントを直接デザインに取り込んで挿入し、各コンポーネントの使用方法の他の例を確認できます。
通知
ボタン
Breadcrumb
カード
カルーセル
チェックボックス
Coachmark
コンテキスト メニュー
ダイアログ
Dropdown
グループリスト
Hyperlink
Input
キーと値のペア
Paragraph
ピッカー
ピボット
進行状況インジケーター
Radio
スクロール バー
検索ボックス
サイド パネル
状態ラベル
トースト
Toggle
注: Fluent UI では、トグルはチェックボックスの一種です。
ヒント
その他のリソース
ここに一覧表示されている一部のコンポーネントとMicrosoft Teams UI Kit のコード サンプルと実装の詳細を取得します。
Platform Docs