Power Apps での ボタン コントロール
ユーザーがクリックまたはタップしてアプリを操作できるコントロール。
内容
ユーザーがコントロールをクリックまたはタップするときに 1 つ以上の数式を実行するように、ボタン コントロールの OnSelect プロパティを構成します。
キー プロパティ
OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。
テキスト – コントロールに表示されるテキスト、またはユーザーがコントロールに入力するテキスト。
追加のプロパティ
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 )
例
ボタンに基本的な数式を追加する
テキスト入力 コントロールを追加し、ソースという名前を付けます。
コントロールの追加、名前付け、構成 についてはこちらをご覧ください。
ボタン コントロールを追加し、Text プロパティを "追加" に設定し、その OnSelect プロパティをこの式に設定します:
UpdateContext({合計:合計 + 値(Source.Text)})UpdateContext 関数または その他の関数 に関する詳細情報を希望しますか?
ラベル コントロールを追加して、数式バーでその Text プロパティを 値 (合計) を設定してから F5 を押します。
ソースから既定のテキストをクリアし、数値を入力してから、追加をクリックまたはタップします。
ラベル コントロールには、入力した数値が表示されます。
ソースから数値をクリアし、別の数値を入力してから、追加をクリックまたはタップします。
ラベル コントロールには、入力した 2 つの数値の合計が表示されます。
(オプション) 前の手順を何回も繰り返します。
Esc キーを押して (または右上隅の閉じるアイコンをクリックまたはタップして)、既定のワークスペースに戻ります。
複数の数式を使用してボタンを構成する
エントリ間のテキスト入力コントロールをクリアする数式を追加します。
ソースの HintText プロパティを "数字を入力" に設定します。
追加の OnSelect プロパティを次の数式に設定します:
UpdateContext({合計:合計 + 値(Source.Text)});
UpdateContext({ClearInput: ""})注意
複数の数式はセミコロン “;“ で区切ります。
ソースの Default プロパティを ClearInput に設定します。
F5 キーを押してから、複数の数値を一緒に追加してアプリをテストします。
合計をリセットする別のボタンを追加する
計算間の合計をクリアする 2 番目のボタンを追加します。
別のボタン コントロールを追加し、Text プロパティを "クリア" に設定して、OnSelect プロパティを次の数式に設定します:
UpdateContext({Total:0})
F5 キーを押し、複数の数値を一緒に追加してから、クリアをクリックまたはタップして合計をリセットします。
ボタンの外観を変更する
ボタンの図形を変更する
既定では、Power Apps では、角の丸い四角形のボタン コントロールが作成されます。 Height、Width、Radius の各プロパティを設定することにより、ボタン コントロールの図形に基本的な変更を加えることができます。
注意
アイコンと図形 にはさまざまなデザインが用意されており、ボタン コントロールで実行できるのと同じ基本的な機能のいくつかを実行できます。 ただし、アイコンと図形 には テキスト プロパティはありません。
ボタン コントロールを追加し、Height および Width プロパティを 300 に設定して、大きな正方形のボタンを作成します。
RadiusTopLeft、RadiusTopRight、RadiusBottomLeft、RadiusBottomRight の各プロパティを変更して、四隅の曲率の量を調整します。 異なるいくつかの図形の例を次に示します。それぞれ 300 x 300 の正方形のボタンを基にしています:
- 4 つすべての Radius の値を 150 に設定して円を作成します。
- RadiusTopLeft および RadiusBottomRight の値を 300 に設定して、葉の形をしたButtonを作成します。
- RadiusTopLeft および RadiusTopRight の値を 300 に設定し、RadiusBottomLeft および RadiusBottomRight の値を 100 に設定して、タブの形をしたボタンを作成します。
カーソルを置いたときのボタンの色を変更する
既定では、ボタン コントロールの塗りつぶしの色は、マウスでカーソルを置くと 20% 暗くなります。 HoverFill プロパティを変更することで、この動作を調節できます。そのためには ColorFade 関数を使用します。 ColorFade 数式を正の比率に設定すると、ボタンにカーソルを置いたときの色が薄くなります。一方、負の比率に設定すると色が濃くなります。
HoverFill プロパティを、ColorFade 関数の代わりに、ColorValue 関数を含む数式 ColorValue("Red") などに設定してボタン コントロールの色を指定することもできます。
注意
色の値は、名前か 16 進値のいずれかの CSS 色定義で指定できます。
- 作成したいずれかのボタンで、ColorFade 関数を ColorValue 関数に置き換え、効果を確認します。
アクセシビリティ ガイドライン
色のコントラスト
- 標準の色のコントラスト要件 が適用されます。
スクリーン リーダー サポート
- Text を指定する必要があります。
キーボードのサポート
- TabIndex を 0 以上にして、キーボード ユーザーがそこに移動できるようにする必要があります。
- フォーカス インジケーターは明確に表示する必要があります。 これを実現するには FocusedBorderColor および FocusedBorderThickness を使用します。
注意
ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)
この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。