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ではサポートされません。