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.
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)
}
}
}
}
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/")
}
}
}
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
This component is applicable to this moment:
You can find design specifications for this component in the Components Spec download under Design Resources.