Bixby Developer Center

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 devices and three for watch devices.

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

• Selection in an Input Moment
• Result Moment
• Confirmation Moment

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