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 {
            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 master 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.