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.

Interactive Demo

Child Keys

content
required
Layout container that holds informational content
overflow
optional
Determines the behavior of the hbox content if the information extends past the container

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

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 these moments:

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