Bixby Developer Center

Guides
References

single-line

optional

Content that spans a single line. This component can contain text, in-line images, spacers, or a combination of these components. You can have multiple components within a single-line and that displays within that single line. You can also mix and match styles of text within that single-line. Alignment is determined by the parent key, otherwise it is left-aligned by default. You can repeat components in a single-line using a for-each loop.

Interactive Demo

Child Keys

image
optional
Container key for an image that is inline with text
spacer
optional
Forces a space between two inline elements, such as inline image and the text in a single-line component
text
optional
Defines the text within a Views component

Examples

single-line {
text {
value {
template ("#{value(flower.name)}")
}
style (Title_M)
}
}

There are also several shorthand methods you can use:

single-line: text ("#{value(myType)}")
single-line {
text ("#{value(myType)}")
}

If you want to add several components that span a single line, you could do something like this:

layout-macro-def (hotel-rating) {
params {
param (rating) {
type (HotelRating)
min (Required) max (One)
}
param (reviewCount) {
type (HotelReviewCount)
min (Required) max (One)
}
}
content {
single-line {
if (rating == 0) {
text {
value ("0 stars")
}
} else-if (rating <= 0.5) {
image {
url ("/images/icons/half-rating.png")
style (Detail_M)
}
} else-if (rating <= 1.0) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
} else-if (rating <= 1.5) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/half-rating.png")
style (Detail_M)
}
} else-if (rating <= 2.0) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
} else-if (rating <= 2.5) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/half-rating.png")
style (Detail_M)
}
} else-if (rating <= 3.0) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
} else-if (rating <= 3.5) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/half-rating.png")
style (Detail_M)
}
} else-if (rating <= 4.0) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
} else-if (rating <= 4.5) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/half-rating.png")
style (Detail_M)
}
} else-if (rating <= 5.0) {
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
image {
url ("/images/icons/rating.png")
style (Detail_M)
}
} else {
text {
value ("No Rating")
}
}
spacer
text {
value ("[out of #{value(reviewCount)} reviews]")
style (Detail_M)
}
}
}
}

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:

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