Bixby Developer Center

References

divider

optionalmultiple allowed

Creates a divider between text or areas in a given section container or compound-card. If you specify multiple dividers, it will merge them into a single divider.

Examples

The following example uses a divider in a compound card:

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 master on GitHub

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

The following example uses a divider in a section:

layout {
match: Hotel (hotel)
mode (Details)

content {
section {
content {
image-carousel {
images (hotel.images)
}
title-area {
halign (Start)
slot1 {
text {
value ("#{value(hotel.name)}")
style (Title_S)
}
}
slot2 {
paragraph {
value ("From #{value(hotel.lowRate)}#{value(hotel.rating)} stars")
style (Detail_L)
}
}
slot3 {
macro (hotel-rating) {
param (rating) {
expression (hotel.rating)
}
param (reviewCount) {
if (exists(hotel.reviewCount)) {
expression (hotel.reviewCount)
}
}
}
}
}
}
}
section {
title ("Description")
content {
paragraph {
value ("It is a low-rise boutique hotel that features a pool in the back side of the building, although it's empty.")
style (Detail_L)
}
divider
paragraph {
value ("This is a great place to stay for your visit to San Andreas!")
}
attribution-link {
label {
template ("Open Bixby Developer Center")
}
url {
template ("https://bixbydevelopers.com/")
}
}
}
}
}
}

View master 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 this moment:

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