Bixby Developer Center

Guides
References

hbox

optionalmultiple allowed

Horizontal box that spans the width of the screen. Each hbox contains a number of vbox keys to fit inside of it. Per hbox, you should have at least two vbox components. Additionally, the maximum vbox components per hbox is seven for mobile and three for watch.

You can repeat the vbox keys within an hbox using a for-each loop.

Examples

result-view {
match {
Hotel (hotel) {
from-output: ShowHotelHbox
}
}

message ("Here is a hotel as an hbox and vbox:")

render {
layout {
section {
content {
hbox {
content {
vbox {
content {
single-line {
text {
value ("From #{value(hotel.lowRate)}")
}
}
}
}
vbox {
content {
single-line {
text {
value ("#{value(hotel.rating)} stars")
}
}
}
}
}
}
}
}
}
}
}

View on GitHub

Here is how an hbox appears on different devices:

MobileWatch
hbox
Hbox variations, mobile
hbox
Hbox variations, watch
TVFridge
hboxhbox
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 these moments:

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

Child Keys

content
required
Layout container that holds informational content