Bixby Developer Center

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:

    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")
        }
      }

View 9e086b7 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:

• Result Moment while Providing Details
• Confirmation Moment

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