Bixby Developer Center

Guides
References

image-area

optional

Defines an area in the header where an image can appear, as well as additional text in a required title-area. A header is shown above the list of items for a Result List or Selection Prompt and can be used to provide additional context for the moment. For example, when there is a prompt for a ride share, you can display the company logo in an image with the text "Available Rides" to make it clear to the users what they are selecting.

Example

result-view {
match {
Hotel (hotel) {
from-output: ShowHotelsHeaderImageArea
}
}

message {
template ("Here are hotels with a header using image-area:")
}

render {
if (size(hotel) > 1) {
list-of (hotel) {
header {
image-area {
aria-label ("Hotels icon")
aspect-ratio (4:3)
image-object-fit (Contain)
image-object-position (Center)
image-background-color (Transparent)
image-url (images/icons/hotel-icon.png)
title-area {
slot1 {
text {
value ("Hotels")
style (Title_S)
}
}
slot2 {
single-line {
text {
value ("Hotels for you")
style (Detail_L_Soft)
}
}
}
slot3 {
single-line {
text {
value ("Based on your preferences")
style (Detail_M_Soft)
}
}
}
}
}
}
where-each (item) {
layout-macro (hotel-image-card) {
param (hotel) {
expression (item)
}
}
}
}
}
else-if (size(hotel) == 1) {
layout-match (hotel) {
mode (Details)
}
}
}

conversation-drivers {
conversation-driver {
template ("Show hotels as image cards")
}
conversation-driver {
template ("Show hotels as thumbnail cards")
}
conversation-driver {
template ("Show hotels as compound cards")
}
}
}

View on GitHub

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

Child Keys

title-area
required
Layout container to hold a title area, which can contain title text and other detailed text
aria-label
optional
Aria label
aspect-ratio
optional
Determines image card's aspect ratio
image-background-color
optional
Determines the background color of an image
image-object-fit
optional
Determines how an image fits within a Bixby Views component
image-object-position
optional
Determines the positioning alignment of an image within a Bixby Views component
image-url
optional
URL of the image