Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Card Sectioned

情報を小さなブロックにグループ化してタイトル、画像、コンテンツの様々なセクションで整理し、画面で識別しやすいようにします。

CardSectionedパターンは、少量の情報をグループ化して画面で強調表示するために使用します。

使用方法

プレースホルダにコンテンツを追加し、パラメータを使用して方向、向き、パディングのプロパティを定義します。

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

  2. プレースホルダに必要なコンテンツを設定します。

  3. 入力パラメータをデフォルト値に設定します。

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

入力パラメータ

入力名 説明 必須 デフォルト値
Orientation カードの方向を設定します。 Orientation Identifier False Entities.Orientation.Horizontal
ImagePadding Trueの場合、コンテンツに24pxのパディングが設定されます。 Boolean False True
IsRight コンテンツの位置を右に合わせます。これはOrientationパラメータが[Horizontal]に設定されている場合にのみ有効です。 Text False False
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.card-sectioned .flex-direction-row カードのOrientationパラメータがHorizontalに設定されている場合
.card-sectioned .flex-direction-column カードのOrientationパラメータがVerticalに設定されている場合
.card-image .padding-none カードのImagePaddingパラメータがFalseに設定されている場合
.card-sectioned .card-sectioned-right IsRightパラメータがTrueに設定されている場合

高度なユースケース

デバイスに応じて方向を変更する

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

  2. Orientationパラメータを「If(IsPhone(),Entities.Orientation.Vertical, Entities.Orientation.Horizontal)」に設定します。IsPhoneサーバーアクションを条件として使用し、スマホ用の方向を設定します。必要に応じて、IsTabletアクションを使用することやFalse文とTrue文を逆にすることもできます。これにより、デスクトップとタブレットではCardSectionedパターンが横向きになります。スマホでは縦向きになります。

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

デスクトップおよびタブレット:

Phone:

注記

IsRightパラメータは、OrientationパラメータがVertical以外の場合のみ機能します。

  • Was this article helpful?