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

  • [アーティクル]

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

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

Microsoft Teams UI Kit

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

Microsoft Teams UI Kit (Figma) を取得します。

通知

アラート UI コンポーネントの例を示します。

ボタン

ボタン UI コンポーネントの例を示します。

階層リンク UI コンポーネントの例を示します。

カード

例は、カード UI コンポーネントを示しています。

例は、カルーセル UI コンポーネントを示しています。

チェックボックス

UI コンポーネントのチェック ボックスを示す例。

Coachmark

例は、coachmark UI コンポーネントを示しています。

コンテキスト メニュー

例は、コンテキスト メニューの UI コンポーネントを示しています。

ダイアログ

ダイアログ UI コンポーネントの例を示します。

例は、ドロップダウン UI コンポーネントを示しています。

グループリスト

グループ リスト UI コンポーネントの例を示します。

ハイパーリンク UI コンポーネントの例を示します。

Input

入力 UI コンポーネントの例を示します。

キー値のペア

例は、キー値ペア UI コンポーネントを示しています。

Paragraph

例は、段落 UI コンポーネントを示しています。

ピッカー

ピッカー UI コンポーネントの例を示します。

ピボット

ピボット UI コンポーネントの例を示します。

進行状況インジケーター

進行状況インジケーター UI コンポーネントの例を示します。

Radio

ラジオ UI コンポーネントの例を示します。

スクロールバー

スクロール バー UI コンポーネントの例を示します。

検索ボックス UI コンポーネントの例を示します。

サイド パネル

サイド パネル UI コンポーネントの例を示します。

状態ラベル

例は、ステータス ラベル UI コンポーネントを示しています。

トースト

トースト UI コンポーネントの例を示します。

Toggle

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

トグル UI コンポーネントの例を示します。

ヒント

例は、ツールヒント UI コンポーネントを示しています。

その他のリソース

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

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