Card Background
Cardと似ていますが、背景画像を定義してコンテンツと一体化させることができます。
CardBackgroundは、少量の情報をグループ化して画面で強調表示するとともに、背景画像を使用して追加の関連性を示すために使用します。
使用方法
プレースホルダにコンテンツを追加し、背景画像を設定します。また、パラメータで、画像に重ねる背景色、コンテンツの位置、カードの高さの最小値を定義することもできます。
-
CardBackgroundパターンをプレビューにドラッグします。
-
入力パラメータをデフォルト値に設定します。
-
パブリッシュしてテストします。
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| 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パターンに新しいスタイルを追加する
-
Counterパターンをプレビューにドラッグします。
-
入力パラメータを以下の値に設定します。
- Color:
Entities.Color.Neutral10 - Position:
Entities.PositionExtended.BottomCenter - Height:
400 - ExtendedClass:
shadow-xl
- Color:
-
［Content］プレースホルダにテキストウィジェットを追加し、Style Classesプロパティを「
heading4 text-neutral-0」に設定します。
-
画像を［BackgroundImage］プレースホルダにドラッグします。
-
パブリッシュしてテストします。
注記
object-fitプロパティはInternet Explorerではサポートされません。