Skip to main content

 

パターン

 

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

 

OutSystems

Align Center

コンテンツをコンテナの中央に合わせて水平または垂直に配置します。

AlignCenterは、コンテナ内の中央に来るようににコンテンツを水平または垂直に配置し、高さや幅が異なる多くの要素の位置を合わせるために使用します。

使用方法

プレースホルダに2つ以上の要素を追加します。選択した方向に応じて中央に要素が配置されます。

  1. AlignCenterパターンをプレビューにドラッグします。

  2. UserInitialsパターンを[AlignCenter]プレースホルダにドラッグします。

  3. Name入力パラメータに、(たとえば)「Scott Ritchie」と入力します。

  4. Textウィジェットを[AlignCenter]プレースホルダにドラッグし、「Scott Ritchie」と入力します。

  5. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
Orientation 内部でのコンテンツの方向を設定します。 Orientation Identifier False Entities.Orientation.Horizontal
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.center-align .center-align.flex-direction-row OrientationパラメータがHorizontalの場合
.center-align .center-align.flex-direction-column OrientationパラメータがVerticalの場合

高度なユースケース

カスタムコンテンツとの垂直整列を設定する

  1. AlignCenterパターンをプレビューにドラッグします。

  2. Orientationパラメータを「Vertical」に設定します。

  3. 画像を[AlignCenter]プレースホルダにドラッグし、border-radius-circleクラスを追加します。

  4. コンテナを[AlignCenter]プレースホルダにドラッグし、水平位置を中央に設定します。

  5. コンテナに、テキスト「Scott Ritchie」を含むTextウィジェットを追加し、スタイルクラスを「heading-4」に設定します。

  6. テキスト「Marketing Communications Manager」を含む別のTextウィジェットを追加し、これをコンテナに含めます。

  7. コンテナを[AlignCenter]プレースホルダにドラッグし、Textウィジェットを追加します。

  8. テキスト「02 Jan」を入力し、スタイルクラスを「font-size-xs text-neutral-6」に設定します。

  9. パブリッシュしてテストします。

  • Was this article helpful?