Fluent UI コントロールを使用する

[このトピックはプレリリース ドキュメントであり、変更されることがあります。]

Microsoft Teams で見栄えのするアプリを作成することは新しいコンポーネントを使うと簡単になります。 Fluent UI フレームワーク に基づいて構築された、この新しいコンポーネントは Teams スタイルで見栄えが良く、Teams の規定テーマに自動的に調整されます。 新しいコントロールは、ボタン、チェック ボックス、コンボ ボックス、日付ピッカー、ラベル、ラジオ グループ、評価、スライダー、テキスト ボックス、トグルです。

各 Fluent UI コントロールとその最も便利なプロパティを見てみましょう。 Power Apps でのコントロールとプロパティの完全なリストについては、Power Apps のコントロールとプロパティ をご覧ください。

Button

ユーザーがアプリとやり取りするために選択できるコントロール。

ボタン コントロール

内容

ユーザーがコントロールを選択したときに 1 つ以上の数式を実行するように、ボタン の OnSelect プロパティを構成します。

キー プロパティ

ButtonType – 表示するボタンのスタイル、標準、またはプライマリ。 規定値: Standard

OnSelect – ユーザーがコントロールを選択する場合のアプリの反応方法。

Text – コントロールに表示されるテキスト、またはコントロールにユーザーが入力するテキストです。

チェック ボックス

値を true または false に設定するためにユーザーがオンまたはオフにできるコントロール。

チェック ボックス コントロール

内容

ユーザーは、ユーザーインターフェイスで広く使用されてきた、このなじみのあるコントロールを使用してブール値を指定できます。

キー プロパティ

ボックス側 – チェック ボックスが表示されているコントロールの側面。

ラベル – コントロールに表示されるテキスト。

チェック済み – コントロールがチェックされているかどうか。

コンボ ボックス

ユーザーが、提供された選択肢から選択できるようにするコントロール。 検索と複数選択をサポートしています。

コンボ ボックス コントロール

内容

コンボ ボックス コントロールで、ユーザーは選択する項目を検索することができます。 検索は、SearchField プロパティについてサーバー側で実行されるので、パフォーマンスが非常に大規模なデータ ソースによって影響を受けることはありません。

単一選択モードまたは複数選択モードは SelectMultiple プロパティを介して構成されます。

キー プロパティ

Items – 選択元となるデータのソース。

DefaultSelectedItems – ユーザーがコントロールを操作する前に、最初に選択されている項目。

SelectMultiple – ユーザーが、単一の項目または複数の項目を選択できるかどうか。

IsSearchable – 選択する前にユーザーが項目を検索できるかどうか。

日付の選択

ユーザーが日付を選択できるコントロール。

日付ピッカーのコントロール

内容

テキスト入力コ ントロールの代わりに 日付ピッカー コントロールを追加すると、ユーザーが適切な形式で日付を指定しやすくなります。

キー プロパティ

– 日付コントロールで現在選択されている日付。 この日付はローカル時間で表されます。

形式 – コントロールで日付が表示され、ユーザーが日付を指定するテキスト形式。 このプロパティを ShortDate (既定) または LongDate に設定して、このコントロールの言語プロパティに基づいて日付を書式設定できます。 また、言語に関係なく同じ形式を使用する場合は、このプロパティを yyyy/mm/dd などの式に設定できます。 たとえば、次のようなものです。

  • ユーザーが 2017 年の最終日をクリックまたはタップし、Format プロパティが ShortDate に、Language プロパティが en-us に設定されている場合、コントロールは 12/31/2017 を表示します。

  • ユーザーが 2017 年の最終日をクリックまたはタップし、Format プロパティが LongDate に、Language プロパティが fr-fr に設定されている場合、コントロールは dimanche 31 December 2017 を表示します。

ラベル

テキスト、数値、日付、または通貨などのデータを表示するボックスです。

ラベル コントロール

内容

ラベルには、入力した内容がそのまま表示されるリテラル文字列として、またはテキスト文字列に評価される数式として指定したデータが表示されます。 ラベルは通常、他のコントロール (画面を識別するためのバナーなど) の外側に、別のコントロール (評価コントロール、オーディオ コントロールなど) を識別するラベルとして、またはギャラリー内の項目に関する特定の種類の情報を示すために表示されます。

キー プロパティ

– コントロールのテキストの色。

Font – テキストを表示するフォント ファミリーの名前。

テキスト – コントロールに表示されるテキスト。

オプション グループ

入力コントロールに複数のオプションが表示され、ユーザーは一度に 1 つだけ選択できます。

ラジオ グループ コントロール

内容

標準的な HTML の入力コントロールであるラジオ コントロールは、少数の相互に排他的なオプションに使用するのに最適です。

キー プロパティ

項目 – ギャラリー、リスト、グラフなどのコントロールに表示されるデータのソース。

選択済 – 選択された項目を表すデータ レコード。

評価

ユーザーが 0 から指定された最大数までの値を示すために使用できるコントロールです。

評価コントロール

内容

たとえば、このコントロールでは、ユーザーが何かをどの程度気に入ったかを特定数の星を選択して示すことができます。

キー プロパティ

– ユーザーが変更する前のコントロールの初期値です。

Max – ユーザーがスライダーまたは評価を設定できる最大値です。

スライダー

ハンドルをドラッグすることによりユーザーが値を指定できるコントロールです。

スライダー コントロール

内容

ユーザーは、スライダーのハンドルを左右または上下 (あなたが選択した方向) にドラッグして、指定された最小値と最大値の間の値を指定できます。

キー プロパティ

Max – ユーザーがスライダーまたは評価を設定できる最大値です。

Min – ユーザーがスライダーを設定できる最小値です。

Value – 入力コントロールの値です。

レイアウト – コントロールが水平に表示されるか垂直に表示されるか。

値を表示 – コントロールに値を表示するかどうか。

テキスト ボックス

ユーザーがテキスト、数値、およびその他のデータを入力できるボックス。

テキスト ボックス コントロール

内容

ユーザーは、テキスト ボックス コントロールに入力してデータを指定できます。 アプリの構成方法に応じて、そのデータをデータ ソースに追加したり、一時的な値を計算するために使用したり、また他の方法で組み込んだりすることができます。

キー プロパティ

Font – テキストを表示するフォント ファミリーの名前。

Text – コントロールに表示されるテキスト、またはコントロールにユーザーが入力するテキストです。

切り替え

ユーザーがハンドルを動かすことでオンまたはオフにできるコントロールです。

トグル コントロール

内容

トグル コントロールは最新のユーザーインターフェイス用に設計されていますが、チェック ボックスと同じように動作します。

キー プロパティ

チェック済み – コントロールがチェックされているかどうか。

OffText – オフ状態のテキスト。

OnText – オン状態のテキスト。

Fluent UI と従来のコントロールの違い

コントロールのプロパティは、使いやすさのために簡素化されています。 次の表に、Fluent UI コントロールと従来のコントロール プロパティ名の違いを示します。

コントロールの種類 クラシック Fluent UI
Button 画面サイズに合わせる
背景
TabIndex
ColorFill
ColorBackground
AcceptsFocus
チェック ボックス 既定
TabIndex
チェック済み
AcceptsFocus
コンボ ボックス InputTextPlaceholder
TabIndex
テキスト
AcceptsFocus
日付の選択 SelectedDate
TabIndex

AcceptsFocus
ラベル サイズ FontSize
オプション グループ TabIndex AcceptsFocus
評価 既定
TabIndex

AcceptsFocus
スライダー 既定
TabIndex

AcceptsFocus
テキスト ボックス
既定
画面サイズに合わせる
SpellCheck
TabIndex
ColorText

ColorBackground
EnableSpellCheck
AcceptsFocus
切り替え サイズ
既定
TabIndex
FontSize
チェック済み
AcceptsFocus

関連項目

追加のアプリの作成
Power Apps Studio を理解する