Bixby Developer Center

Guides
References

paragraph

optionalvalue optional

Paragraph of text, providing a summary of information for the user. For example, the paragraph can contain a summary of a show, a restaurant review, or an address of a hotel. You can add a line break in paragraph text using \n in your *.view.bxb file. In the interactive demo, you can press Return in the text field to create a line break, which will show up as a \n in the text block under the Code tab.

The parent key determines how many lines of the paragraph will display. The recommended text style is Detail_L and Detail_M. Default alignment is left, except for watch, which is center-aligned.

Interactive Demo

Child Keys

style
optional
Determines the text style
value
optional
Plain text that is rendered

Examples

Here are some examples of how to use paragraph within a layout:

layout {
match: Hotel (hotel)
mode (Details)

content {
section {
content {
image-carousel {
images (hotel.images)
}
title-area {
halign (Start)
slot1 {
text {
value ("#{value(hotel.name)}")
style (Title_S)
}
}
slot2 {
paragraph {
value ("From #{value(hotel.lowRate)} • #{value(hotel.rating)} stars")
style (Detail_L)
}
}
slot3 {
layout-macro (hotel-rating) {
param (rating) {
expression (hotel.rating)
}
param (reviewCount) {
if (exists(hotel.reviewCount)) {
expression (hotel.reviewCount)
}
}
}
}
}
}
}
section {
title ("Description")
content {
paragraph {
value ("It is a low-rise boutique hotel that features a pool in the back side of the building, although it's empty.")
style (Detail_L)
}
divider
paragraph {
value ("This is a great place to stay for your visit to San Andreas!")
}
attribution-link {
label {
template ("Open Bixby Developer Center")
}
url {
template ("https://bixbydevelopers.com/")
}
}
}
}
}
}

View on GitHub

This is the shorthand method of creating a paragraph:

paragraph ("#{value(hotel.description)}") {
style (Detail_M)
}

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.