A card that can contain other Views components, such as another card, text, images, hbox
containers, or title-areas. You can create a more customized card with an array of child component options. If you define an on-click
for this card, make sure that none of its child cards are tappable.
If necessary, you can loop the components within a compound-card
content container using a for-each
loop.
Consider the following situations:
compound-card
, any on-click
defined is ignored.selection-of
, these cards are tappable with an intent automatically generated, even if you do not provide one. Also, if you have multi-selection enabled, on-click
is ignored.list-of
or displaying the details in a result view, and you do not provide an on-click
, then the component won't look nor be tappable.macro-def (flower-compound-card) {
params {
param (flower) {
type (Flower)
min (Required) max (One)
}
}
content {
compound-card {
content {
image-card {
aspect-ratio (4:3)
image-url ("#{value(flower.imageUrls[0])}")
title-area {
halign (Start)
slot1 {
text {
value ("#{value(flower.name)}")
style (Title_M)
}
}
}
}
paragraph {
value {
template ("#{value(flower.priceRange)}")
}
style (Detail_L)
}
single-line {
text {
value {
template ("#{value(flower.deliveryType)}")
}
style (Detail_M_Soft)
}
}
divider
single-line {
text {
value ("In Stock")
style (Detail_M_Soft)
}
}
}
on-click {
view-for (flower)
}
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
This component is applicable to these moments:
You can find design specifications for this component in the Components Spec download under Design Resources.