Skip to main content

 

 

 

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

Card Background

Card Background UIパターンを使用すると、少量の情報をグループ化し、背景画像を使用して画面で強調表示できます。情報が小さなブロックにグループ化され、画面上で識別しやすくなります。

Card Background UIパターンの使用方法

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

    Card Backgroundウィジェットが表示されます。

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

    デフォルトで、Card Backgroundウィジェットにはテキストを含む[Content]プレースホルダと画像を含む[Background Image]プレースホルダが含まれています。

  3. プレースホルダにコンテンツを追加します。この例では、画像を変更しています。これを行うには、ウィジェットツリーでImageを選択し、[Properties]タブの[Image]ドロップダウンで表示する画像を選択します。

  4. Properties]タブで(オプションの)プロパティを設定し、Card Backgroundウィジェットのルックアンドフィールを変更できます。たとえば、画像に重ねる背景色、コンテンツの位置、カードの高さの最小値を設定できます。

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

プロパティ

プロパティ 説明
Color(Color Identifier型): オプション 背景色を設定します。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - 背景色は適用されません。これがデフォルトです(Entities.Color.Transparent)。
  • Entities.Color.Red - 赤色の背景色がカードに適用されます。
Position(PositionExtended Identifier型): オプション ウィジェットの位置を設定します。

  • Entities.PositionExtended.BottomRight - 画面の右下にウィジェットが表示されます。
  • Entities.PositionExtended.Center - 画面の中央にウィジェットが表示されます。
Height(Integer型): オプション カードの高さ(ピクセル単位)を設定します。デフォルトでは、縦方向に並べてコンテンツが配置されます。

  • 空白 - カードの高さを300ピクセルにします。
  • 500 - カードの高さを500ピクセルにします。
ExtendedClass(Text型): オプション Card Background UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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