Bixby Developer Center

Guides
References

cell-area

optionalmultiple allowed

A cell-area defines a cell within a layout, with no background or border (which is partially what differentiates it from a cell-card). A cell-area can be used individually in page layouts or within selection prompt lists. A cell-area is commonly used to represent subjects with simple information that does not need to be represented as cards. For example, you can use a cell-area to display a contact's picture, name, and phone number. You should use cell-area when the information you want to display is short and simple, such as phone contacts or recipe names.

Cell-areas are made up of a three-slot system (slot1, slot2, and slot3), with different cell variations offering different slot combinations. The different slots can only hold certain types of information. The slots will span the cell-area, depending on how many slots are specified.

  • One-slot cells only generate information in slot2.
  • Two-slot cells can have information in slot1 and slot2 or slot2 and slot3.
  • Three-slot cells have information in slot1, slot2, and slot3.

For more information about each slot, see the specific child keys listed.

Examples

result-view {
match: Flower (flower) {
from-output: ShowFlowerCellAreas
}

message {
template ("Here is a flower as a cell area:")
}

render {
list-of (flower) {
has-details (false)
where-each (item) {
cell-area {
slot1 {
image {
url ("#{value(item.imageUrls[0])}")
shape (Square)
}
}
slot2 {
content {
order (PrimarySecondary)
primary ("#{value(item.name)}")
secondary ("#{value(item.priceRange)}")
}
}
}
}
}
}
conversation-drivers {
conversation-driver ("Show a cell card")
}
}

View on GitHub

Here is how a cell-area appears on different devices:

MobileWatchTVFridge
cell-areacell-areacell-areacell-area
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Design Considerations

This component is applicable during these Moments:

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

Child Keys

slot2
required
The middle slot within a cell
slot1
optional
The left-most slot within a cell, which can hold a cell-image
slot3
optional
The right-most slot in a cell