通知を受け取る

UiPath Apps

UiPath Apps ガイド

レイアウトとスタイル

App Studio では、アプリのレイアウトをカスタマイズできる豊富なオプションが用意されており、さまざまなコンテナー コントロールやコントロールごとのスタイル オプションを使用できます。

コントロールの位置を設定する

Customized page layout can be easily created using Container Layout control.
ページやコンテナー内のコントロールの位置は、配置とレイアウトのオプションを使用して設定できます。

ページ コントロールとコンテナー コントロール内のコントロールの位置は、[レイアウト] セクションの方向 (縦方向/横方向) と配置の属性を使用して指定できます。既定では、コントロールは 1 行に収まります。[折り返しを許可] プロパティを設定すると、必要に応じてコントロールが複数行に折り返されて表示されます。

18521852

:white-check-mark: When enabled, the Allow wrapping property gets applied if the controls inside the container cannot fit in a line.

コンテナー内のコントロールは、そのコントロール独自の配置オプションを使用して親の配置設定を上書きすることができます。既定で親の配置設定を適用するには、選択されている配置アイコンを切り替えて、特定の配置設定をオフにします。

18501850

:white-check-mark: If you want a group of controls to have a specific positioning, place them inside a container and configure the container's layout and alignment.

コントロールのサイズを変更する

既定では、コントロールのサイズは自動的に設定されます。[auto] に設定すると、コントロール内のコンテンツのサイズに従って自動で設定されます。たとえばボタン コントロールの幅と高さが [auto] に設定されている場合、ボタンのサイズはボタン内のテキストに基づいて拡大/縮小されます。

また、特定の高さと幅を設定することもできます。幅/高さの最小サイズと最大サイズは、[サイズ] セクションの (...) アイコンをクリックして設定できます。

測定単位は %、px (ピクセル)、および em (要素のフォント サイズに相対的) です。たとえば、「3em」は、現在のフォントの 3 倍のサイズを意味します。

246246

:white-check-mark: Choosing units of measurement
測定単位は、単位のドロップダウン リストから選択するか、キーボードで直接単位を入力し Enter キーを押します。たとえば、幅を 50% に設定するには「50%」と入力します。

測定単位を指定しない場合、既定でピクセル (px) に設定されます。

フォントをカスタマイズする

アプリでのテキストの表示方法を変更するには、フォント ファミリ、フォント サイズ、フォントの色、およびフォント スタイル (太字、斜体、下線) の属性を調整します。
You can switch between RGB, HEX, and HSL color by clicking on the arrows next to the color value.

241241

枠線を設定する

[枠線] セクションのプロパティは次の 3 つです。

  • 枠線の太さ
  • 枠線の色
  • 角の半径

これらの属性の測定単位はピクセルです。

231231

:white-check-mark: Circular Buttons using Corner Radius
円形のボタンは、 [角の半径] プロパティを変更して作成できます。

コントロールの配置を変更する

コントロールとコンテナーの配置は、[マージン] と [パディング] を使用して設定できます。

[マージン] はコントロールの周囲の空白を設定します。

246246

[パディング] はコントロールとその内側にあるコンテンツの間の空白を設定します。

246246

[コンテナー] コントロールでは [マージン] セクションと [パディング] セクションが使用できますが、その他のほとんどのコントロールでは、[マージン] セクションしか使用できません。

[マージン] セクションと [パディング] セクションの両方で、上/下および左/右の値のリンクを解除して個別に設定できます。

背景色を変更する

以下の 3 つの色モデルのいずれかを使用して、コントロールの背景色を変更できます。

  • RGB
  • HEX
  • HSL
    背景色を変更するには、色の値の横にある矢印をクリックします。
261261

Updated 5 days ago

レイアウトとスタイル


改善の提案は、API リファレンスのページでは制限されています

改善を提案できるのは Markdown の本文コンテンツのみであり、API 仕様に行うことはできません。