Bixby Developer Center

Guides
References

compound-card

optionalmultiple allowed

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.

Note

Consider the following situations:

  • If you nest a card within a compound-card, any on-click defined is ignored.
  • If your cards are in a 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.
  • If your cards are in a 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.

Interactive Demo

Child Keys

chin[deprecated]
optional
This key is deprecated
content
optional
Layout container that holds informational content
on-click
optional
Defines an intent, a URL, or a view-for to use when a user taps on the component

Example

layout-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)
}
}
}
}

View on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

Design Considerations

This component is applicable to these moments:

You can find design specifications for this component in the Components Spec download under Design Resources.