Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Align Center

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

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

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

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

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

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

    デフォルトで、Align Centerウィジェットには[Content]プレースホルダが含まれています。

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

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

  5. その他の関連するコンテンツを[Content]プレースホルダに追加します。この例では、テキスト(「Scott Richie」)と画像を追加しています。

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

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

Align Center UIパターンなし

Align Center UIパターンあり

プロパティ

プロパティ 説明
IsHorizontal(Boolean型): オプション Trueの場合、コンテンツは横方向に表示されます。これがデフォルトです。Falseの場合、コンテンツは縦方向に表示されます。
ExtendedClass(Text型): オプション Align Center UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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