Power Apps での Button コントロール

ユーザーがクリックまたはタップしてアプリを操作できるコントロール。

内容

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

キー プロパティ

OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。

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

追加のプロパティ

Align – コントロールの水平方向の中心に対するテキストの位置。

AutoDisableOnSelect – OnSelect 動作の実行時にコントロールを自動で無効化します。

BorderColor – コントロールの境界線の色。

BorderStyle – コントロールの境界線が 実線、破線、点線、または なし かどうか。

BorderThickness – コントロールの境界線の太さ。

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

DisplayMode – コントロールがユーザー入力を許可するか (編集)、データのみを表示するか (表示)、または無効にするか (無効) どうか。

DisabledBorderColor – コントロールの DisplayMode プロパティが 無効 に設定されている場合のコントロールの境界線の色。

DisabledColor – コントロールの DisplayMode プロパティが 無効 に設定されている場合のコントロール内のテキストの色。

DisabledFill – コントロールの DisplayMode プロパティが 無効 に設定されている場合のコントロールの背景色。

FocusedBorderColor – コントロールがフォーカスされているときのコントロールの境界線の色。

FocusedBorderThickness – コントロールがフォーカスされているときのコントロールの境界線の太さ。

Fill – コントロールの背景色。

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

FontWeight – コントロール内のテキストの太さ: 太字、中太、標準、または 細字。

Height – コントロールの上端と下端間の距離。

HoverBorderColor – ユーザーがコントロール上にマウス ポインターを重ねているときのコントロールの境界線の色。

HoverColor – ユーザーがコントロールにマウス ポインターを重ねているときのコントロール内のテキストの色。

HoverFill – ユーザーがコントロールにマウス ポインターを重ねているときのコントロールの背景色。

Italic – コントロール内のテキストを斜体にするかどうか。

PaddingBottom – コントロール内のテキストとそのコントロールの下端間の距離。

PaddingLeft – コントロール内のテキストとそのコントロールの左端間の距離。

PaddingRight – コントロール内のテキストとそのコントロールの右端間の距離。

PaddingTop – コントロール内のテキストとそのコントロールの上端間の距離。

Pressed – コントロールが押されている間は true 、それ以外の場合は false。

PressedBorderColor – ユーザーがコントロールをタップまたはクリックしたときのコントロールの境界線の色。

PressedColor – ユーザーがコントロールをタップまたはクリックしたときのコントロール内のテキストの色。

PressedFill – ユーザーがコントロールをタップまたはクリックしたときのコントロールの背景色。

RadiusBottomLeft – コントロールの左下隅を丸める度合い。

RadiusBottomRight – コントロールの右下隅を丸める度合い。

RadiusTopLeft – コントロールの左上隅を丸める度合い。

RadiusTopRight – コントロールの右上隅を丸める度合い。

Size – コントロールに表示されるテキストのフォント サイズ。

Strikethrough – コントロールに表示されるテキストに取り消し線を付けるかどうか。

TabIndex – 他のコントロールに関連するキーボード ナビゲーションの順序。

Tooltip – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

Underline – コントロールに表示されるテキストの下に線を引くかどうか。

VerticalAlign – コントロールの垂直方向の中心に対するコントロール上でのテキストの位置。

Visible – コントロールが表示されるか非表示になるか。

Width – コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離。

関連する関数

Navigate( ScreenName 、 ScreenTransitionValue )

例

ボタンに基本的な数式を追加する

1. Text input コントロールを追加し、ソース という名前を付けます。

   コントロールの追加、名前付け、構成 についてはこちらをご覧ください。

2. Button コントロールを追加し、Text プロパティを "追加" に設定し、その OnSelect プロパティをこの式に設定します:
   UpdateContext({合計:合計 + 値(Source.Text)})

   UpdateContext 関数または その他の関数 に関する詳細情報を希望しますか?

3. Label コントロールを追加して、数式バーでその Text プロパティを 値 (合計) を設定してから F5 を押します。

4. ソース から既定のテキストをクリアし、数値を入力してから、追加 をクリックまたはタップします。

   Label コントロールには、入力した数値が表示されます。

5. ソース から数値をクリアし、別の数値を入力してから、追加 をクリックまたはタップします。

   Label コントロールには、入力した 2 つの数値の合計が表示されます。

6. (オプション) 前の手順を何回も繰り返します。

7. Esc キーを押して (または右上隅の閉じるアイコンをクリックまたはタップして)、既定のワークスペースに戻ります。

複数の数式を使用してボタンを構成する

エントリ間の Text input コントロールをクリアする数式を追加します。

1. ソース の HintText プロパティを "数字を入力" に設定します。

2. 追加 の OnSelect プロパティを次の数式に設定します:

   UpdateContext({合計:合計 + 値(Source.Text)});
   UpdateContext({ClearInput: ""})

   注意

   複数の数式はセミコロン “;“ で区切ります。

3. ソース の Default プロパティを ClearInput に設定します。

4. F5 キーを押してから、複数の数値を一緒に追加してアプリをテストします。

合計をリセットする別のボタンを追加する

計算間の合計をクリアする 2 番目のボタンを追加します。

1. 別の Button コントロールを追加し、Text プロパティを "クリア" に設定して、OnSelect プロパティを次の数式に設定します:

   UpdateContext({Total:0})

2. F5 キーを押し、複数の数値を一緒に追加してから、クリア をクリックまたはタップして合計をリセットします。

ボタンの外観を変更する

ボタンの図形を変更する

既定では、Power Apps では、角の丸い四角形の Button コントロールが作成されます。 Height、Width、Radius の各プロパティを設定することにより、Button コントロールの図形に基本的な変更を加えることができます。

注意

アイコンと図形 にはさまざまなデザインが用意されており、Button コントロールで実行できるのと同じ基本的な機能のいくつかを実行できます。 ただし、Icons and Shapes には Text プロパティはありません。

1. Button コントロールを追加し、Height および Width プロパティを 300 に設定して、大きな正方形のボタンを作成します。

2. RadiusTopLeft、RadiusTopRight、RadiusBottomLeft、RadiusBottomRight の各プロパティを変更して、四隅の曲率の量を調整します。 異なるいくつかの図形の例を次に示します。それぞれ 300 x 300 の正方形のボタンを基にしています:

   • 4 つすべての Radius の値を 150 に設定して円を作成します。
   • RadiusTopLeft および RadiusBottomRight の値を 300 に設定して、葉の形をした Button を作成します。
   • RadiusTopLeft および RadiusTopRight の値を 300 に設定し、RadiusBottomLeft および RadiusBottomRight の値を 100 に設定して、タブの形をしたボタンを作成します。

カーソルを置いたときのボタンの色を変更する

既定では、Button コントロールの塗りつぶしの色は、マウスでカーソルを置くと 20% 暗くなります。 HoverFill プロパティを変更することで、この動作を調節できます。そのためには ColorFade 関数を使用します。 ColorFade 数式を正の比率に設定すると、ボタンにカーソルを置いたときの色が薄くなります。一方、負の比率に設定すると色が濃くなります。

• 作成したいずれかのボタンの HoverFill プロパティで ColorFade の比率を変更し、その効果を確認します。

HoverFill プロパティを、ColorFade 関数の代わりに、ColorValue 関数を含む数式 ColorValue("Red") などに設定して Button コントロールの色を指定することもできます。

注意

色の値は、名前か 16 進値のいずれかの CSS 色定義で指定できます。

• 作成したいずれかのボタンで、ColorFade 関数を ColorValue 関数に置き換え、効果を確認します。

アクセシビリティ ガイドライン

色のコントラスト

• 標準の色のコントラスト要件 が適用されます。

スクリーン リーダー サポート

• Text を指定する必要があります。

キーボードのサポート

• TabIndex を 0 以上にして、キーボード ユーザーがそこに移動できるようにする必要があります。
• フォーカス インジケーターは明確に表示する必要があります。 これを実現するには FocusedBorderColor および FocusedBorderThickness を使用します。

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。