Bixby Developer Center

Guides
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

Divider in a Compound Card

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

View on GitHub

Here is how divider in a compound-card appears on different devices:

MobileWatchTVFridge
compound-cardcompound-cardcompound-cardcompound-card

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 {
layout-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 on GitHub

Here is divider in a section appears on different devices:

MobileWatchTV (Expanded View)Fridge
dividerdividerdividerdivider
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 to this moment:

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