Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Card Background

Cardと似ていますが、背景画像を定義してコンテンツと一体化させることができます。

CardBackgroundは、少量の情報をグループ化して画面で強調表示するとともに、背景画像を使用して追加の関連性を示すために使用します。

使用方法

プレースホルダにコンテンツを追加し、背景画像を設定します。また、パラメータで、画像に重ねる背景色、コンテンツの位置、カードの高さの最小値を定義することもできます。

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

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

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

入力パラメータ

入力名 説明 必須 デフォルト値
Color 背景色を設定します。 Color Identifier False Entities.Color.Transparent
Position ウィジェット要素の周囲の位置を設定します。 PositionExtended Identifier False なしなし
Height カードの高さ(ピクセル単位)を設定します。デフォルトでは、垂直位置が合うようにコンテンツが配置されます。 Integer False 300
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.card-background-content .bottom-center コンテンツの垂直位置を下に合わせ、水平位置を中央に合わせます。
.card-background-content .bottom-left コンテンツの垂直位置を下に合わせ、水平位置を左に合わせます。
.card-background-content .bottom-right コンテンツの垂直位置を下に合わせ、水平位置を右に合わせます。
.card-background-content .center コンテンツの垂直位置を中央に合わせ、水平位置を中央に合わせます。
.card-background-content .center-left コンテンツの垂直位置を中央に合わせ、水平位置を左に合わせます。
.card-background-contente .center-right コンテンツの垂直位置を中央に合わせ、水平位置を右に合わせます。
.card-background-content .top-center コンテンツの垂直位置を上に合わせ、水平位置を中央に合わせます。
.card-background-content .top-left コンテンツの垂直位置を上に合わせ、水平位置を左に合わせます。
.card-background-content .top-right コンテンツの垂直位置を上に合わせ、水平位置を右に合わせます。

高度なユースケース

Counterパターンに新しいスタイルを追加する

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

  2. 入力パラメータを以下の値に設定します。

    • Color: Entities.Color.Neutral10
    • Position: Entities.PositionExtended.BottomCenter
    • Height: 400
    • ExtendedClass: shadow-xl

  3. [Content]プレースホルダにテキストウィジェットを追加し、Style Classesプロパティを「heading4 text-neutral-0」に設定します。

  4. 画像を[BackgroundImage]プレースホルダにドラッグします。

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

注記

object-fitプロパティはInternet Explorerではサポートされません。

  • Was this article helpful?