ユーザーがクリックまたはタップしてアプリを操作できるコントロール。
Description
ユーザーがコントロールをクリックまたはタップしたときに 1 つ以上の数式を実行するように、Button コントロールの OnSelect プロパティを構成します。
重要なプロパティ
OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。
テキスト – コントロールに表示されるテキスト、またはユーザーがコントロールに入力するテキスト。
追加のプロパティ
[配置] – コントロールの水平方向の中心を基準にしたテキストの位置。
AutoDisableOnSelect – OnSelect 動作の実行中にコントロールを自動的に無効にします。
BorderColor – コントロールの境界線の色。
BorderStyle – コントロールの境界線が Solid、Dashed、Doted、None のいずれであるか。
BorderThickness – コントロールの境界線の太さ。
色 – コントロール内のテキストの色。
ContentLanguage - コントロールのコンテナーと異なる場合、コントロールのコンテンツの言語。
DisplayMode – コントロールでユーザー入力 (編集) を許可するか、データのみを表示するか (表示)、無効 (無効) にするかを指定します。
DisabledBorderColor – コントロールの DisplayMode プロパティが Disabled に設定されている場合のコントロールの境界線の色。
DisabledColor – DisplayMode プロパティが Disabled に設定されている場合のコントロール内のテキストの色。
DisabledFill – DisplayMode プロパティが Disabled に設定されている場合のコントロールの背景色。
FocusedBorderColor – コントロールがフォーカスされている場合のコントロールの境界線の色。
FocusedBorderThickness – コントロールがフォーカスされたときのコントロールの境界線の太さ。
塗りつぶし – コントロールの背景色。
フォント – テキストが表示されるフォントファミリの名前。
FontWeight – コントロール内のテキストの重み: 太字、 半ボルト、 標準、 または太さ。
Height – コントロールの上端と下端の間の距離。
HoverBorderColor – ユーザーがそのコントロールにマウス ポインターを置いたままにしたときのコントロールの境界線の色。
HoverColor – ユーザーがマウス ポインターを置いたままにしたときのコントロール内のテキストの色。
HoverFill – ユーザーがマウス ポインターをその上に置いたままにしたときのコントロールの背景色。
斜体 – コントロール内のテキストが斜体かどうかを指定します。
PaddingBottom – コントロール内のテキストとそのコントロールの下端との間の距離。
PaddingLeft – コントロール内のテキストとそのコントロールの左端との間の距離。
PaddingRight – コントロール内のテキストとそのコントロールの右端との間の距離。
PaddingTop – コントロール内のテキストとそのコントロールの上端との間の距離。
押された – コントロールが押されている間は True 、それ以外の場合は false 。
PressedBorderColor – ユーザーがそのコントロールをタップまたはクリックしたときのコントロールの境界線の色。
PressedColor – ユーザーがそのコントロールをタップまたはクリックしたときのコントロール内のテキストの色。
PressedFill – ユーザーがそのコントロールをタップまたはクリックしたときのコントロールの背景色。
RadiusBottomLeft – コントロールの左下隅を丸める角度。
RadiusBottomRight – コントロールの右下隅を丸める角度。
RadiusTopLeft – コントロールの左上隅を丸める角度。
RadiusTopRight – コントロールの右上隅を丸める角度。
サイズ – コントロールに表示されるテキストのフォント サイズ。
取り消し線 – コントロールに表示されるテキストを線で表示するかどうかを指定します。
TabIndex – 他のコントロールに対するキーボード ナビゲーションの順序。
ヒント – ユーザーがコントロールの上にマウス ポインターを置いたときに表示される説明テキスト。
下線 – コントロールに表示されるテキストの下に行を表示するかどうかを指定します。
VerticalAlign – コントロールの垂直方向の中心に対するコントロール上のテキストの位置。
表示 – コントロールが表示されるか非表示になっているか。
幅 – コントロールの左端と右端の間の距離。
X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。
Y – コントロールの上端と親コンテナーの上端との間の距離 (親コンテナーがない場合は画面)。
関連する関数
Navigate( ScreenName, ScreenTransitionValue )
例示
ボタンに基本的な数式を追加する
Text input コントロールを追加し、ソースという名前を付けます。
Button コントロールを追加し、Text プロパティを "Add" に設定し、OnSelect プロパティを次の数式に設定します。
UpdateContext({Total:Total + Value(Source.Text)})UpdateContext 関数またはその他の関数の詳細については、以下をご覧ください。
Label コントロールを追加し、数式バーの Text プロパティを Value(Total) に設定し、F5 キーを押します。
[ソース] から既定のテキストをクリアし、数値を入力して、[追加] をクリックまたはタップします。
Label コントロールには、入力した番号が表示されます。
ソースから番号をクリアし、別の番号を入力して、[追加] をクリックまたはタップします。
Label コントロールには、入力した 2 つの数値の合計が表示されます。
(省略可能)前の手順を 1 回以上繰り返します。
既定のワークスペースに戻すには、Esc キーを押します (または、右上隅にある閉じるアイコンをクリックまたはタップします)。
複数の数式でボタンを構成する
エントリ間の テキスト入力 コントロールをクリアする数式を追加します。
Source の HintText プロパティを "数値を入力" に設定します。
[追加] の OnSelect プロパティを次の数式に設定します。
UpdateContext({Total:Total + Value(Source.Text)});
UpdateContext({ClearInput: ""})注
複数の数式をセミコロン ";" で区切ります。
Source の Default プロパティを ClearInput に設定します。
F5 キーを押し、複数の数値を追加してアプリをテストします。
合計をリセットする別のボタンを追加する
2 つ目のボタンを追加して、計算の合計をクリアします。
別の Button コントロールを追加し、 Text プロパティを "Clear" に設定し、 OnSelect プロパティを次の数式に設定します。
UpdateContext({Total:0})
F5 キーを押し、複数の数値をまとめて追加し、[クリア] をクリックまたはタップして合計をリセットします。
ボタンの外観を変更する
ボタンの図形を変更する
既定では、Power Apps では角が丸い四角形 のボタン コントロールが作成されます。 Button コントロールの高さ、幅、および半径のプロパティを設定することで、ボタン コントロールの図形に基本的な変更を加えることができます。
ボタン コントロールを追加し、その Height プロパティと Width プロパティを 300 に設定して、大きな四角形のボタンを作成します。
RadiusTopLeft、RadiusTopRight、RadiusBottomLeft、RadiusBottomRight の各プロパティを変更して、各コーナーの曲率の量を調整します。 300 x 300 の正方形のボタンから始まる、さまざまな図形の例を次に示します。
- 円を作成するには、4 つの Radius 値をすべて 150 に設定します。
- RadiusTopLeft と RadiusBottomRight の値を 300 に設定して、リーフ型のボタンを作成します。
- RadiusTopLeft と RadiusTopRight の値を 300 に設定し、RadiusBottomLeft と RadiusBottomRight の値を 100 に設定してタブ状のボタンを作成します。
ボタンの上にマウス ポインターを合わせたときにボタンの色を変更する
既定では、 ボタン コントロールの塗りつぶしの色は、マウスでポイントすると 20% 暗くなります。 この動作を調整するには、ColorFade 関数を使用する HoverFill プロパティを変更します。 ColorFade 数式を正のパーセンテージに設定すると、ボタンをポイントすると色が明るくなり、負の割合では色が暗くなります。
ColorValue("Red") のように、HoverFill プロパティを ColorFade 関数ではなく ColorValue 関数を含む数式に設定することで、Button コントロールの色を指定することもできます。
注
色の値には、任意の CSS カラー定義 (名前または 16 進値) を指定できます。
- ColorFade 関数を、作成したいずれかのボタンの ColorValue 関数に置き換え、効果を確認します。
アクセシビリティ ガイドライン
色のコントラスト
- 標準の色コントラスト要件 が適用されます。
スクリーン リーダーのサポート
- テキスト が存在する必要があります。
キーボードのサポート
- キーボード ユーザーが移動できるようにするには、TabIndex を 0 以上にする必要があります。
- フォーカス インジケーターは明確に表示する必要があります。 これを実現するには、FocusedBorderColor と FocusedBorderThickness を使用します。