cell-area
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 consist of a three-slot system, with different cell variations offering different slot combinations. For more information, see the demo and the specific child keys listed.
Interactive Demo
Examples
result-view {
match: Flower (flower) {
from-output: ShowFlowerCellAreas
}
message {
template ("Here is a flower as a cell area:")
}
render {
list-of (flower) {
where-each (item) {
cell-card {
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")
}
}
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 during these Moments:
You can find design specifications for this component in the Components Spec download under Design Resources.