Skip to main content

 

 

 

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

Align Center

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

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

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

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

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

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

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

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

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

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

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

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?