Card Background

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

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

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

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

![](<images/cardbackground-2-ss.png>)

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

![](<images/cardbackground-3-ss.png>)

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

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

![](<images/cardbackground-4-ss.png>)

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

![](<images/cardbackground-5-ss.png>)

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