Card Background
Card Background UIパターンを使用すると、少量の情報をグループ化し、背景画像を使用して画面で強調表示できます。情報が小さなブロックにグループ化され、画面上で識別しやすくなります。
Card Background UIパターンの使用方法
-
Service Studioのツールボックスで
Card Backgroundを検索します。Card Backgroundウィジェットが表示されます。
-
ツールボックスから、Card Backgroundウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Card Backgroundウィジェットにはテキストを含む［Content］プレースホルダと画像を含む［Background Image］プレースホルダが含まれています。
-
プレースホルダにコンテンツを追加します。この例では、画像を変更しています。これを行うには、ウィジェットツリーでImageを選択し、［Properties］タブの［Image］ドロップダウンで表示する画像を選択します。
-
［Properties］タブで（オプションの）プロパティを設定し、Card Backgroundウィジェットのルックアンドフィールを変更できます。たとえば、画像に重ねる背景色、コンテンツの位置、カードの高さの最小値を設定できます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| Color（Color Identifier型）: オプション | 背景色を設定します。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。 例
|
| Position（PositionExtended Identifier型）: オプション | ウィジェットの位置を設定します。 例
|
| Height（Integer型）: オプション | カードの高さ（ピクセル単位）を設定します。デフォルトでは、縦方向に並べてコンテンツが配置されます。 例
|
| ExtendedClass（Text型）: オプション | Card Background UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|