Bixby Developer Center

Guides
References

single-line

optionalmultiple allowed

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.

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 on GitHub

Here is how single-line appears on different devices, using the last example:

MobileWatchTV (Expanded View)Fridge
single-linesingle-linesingle-linesingle-line
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

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