Skip to main content

 

 

 

 
Language:

 

 
従来のWebアプリにのみ適用されます

 

 
 
OutSystems

Align Center

Align Center UIパターンを使用すると、コンテンツを画面上で横方向または縦方向の中央揃えにします。

Align Center UIパターンの使用方法

この例は、ユーザーの名前とイニシャルを中央に配置する方法を示しています。

1.Service StudioのツールボックスでAlign Centerを検索します。

Align Centerウィジェットが表示されます。

![](<images/aligncenter-2-ss.png>)

1.ツールボックスから、Align Centerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

![](<images/aligncenter-3-ss.png>)

1.ツールボックスから、User Initialsパターンを[Align Center]プレースホルダにドラッグします。

1.[Properties]タブで、Nameプロパティに名前を入力します。この例では、「Scott Ritchie」と入力しています。

![](<images/aligncenter-4-ss.png>)

1.関連するコンテンツをAlign Centerウィジェットに追加します。この例では、テキスト(「Scott Richie」)と画像を追加しています。

![](<images/aligncenter-5-ss.png>)

1.Align Centerの[Properties]タブで、コンテンツの方向(縦または横)を設定できます。

![](<images/aligncenter-6-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

Align Center UIパターンなし

Align Center UIパターンあり

プロパティ

プロパティ 説明
Orientation(Orientation Identifier型): オプション コンテンツの方向(横または縦)を設定します。
ExtendedClass(Text型): オプション

Align Center UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • ''myclass'' - 適用されるAlign Center UIのスタイルに_myclass_というスタイルを追加します。
  • ''myclass1'' ''myclass2'' - 適用されるAlign Center UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?