titles

This component displays a title, subtitle, comment, or any type of text content. As the titles component is always part of a widget, this text will be displayed on the widget.

Titles are available in the following content widgets:

Configuration options

Core structure

title

Display the text content for the title.

subtitle

Add a subtitle under the title text.

Other options

align

center, left, right

icon

icon used in the widget.

iconColor

Sets the icon's color. Choose a color from the provided palette. If the property is not specified in the YAML, the default color is black.

style

Properties used for component styling.

Examples and code snippets

A descriptive title added to the image widget.

Examples:

See the full example using static data in GitHub See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub See the full datasource for dynamic data in GitHub.

widgets:
  image-title:
    type: widget.image
    options:
      isContentOverlaid: true
      source:
        uri: =@ctx.datasources.titles-static.image
      bottom:
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.titles-static.title

widgets:
  image-title-dd:
    type: widget.image
    options:
      isContentOverlaid: true
      source:
        uri: =@ctx.datasources.titles.image
      bottom:
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.titles.title

type: datasource.static
options:
  data:
    - address: Národní 135/14, 110 00 Praha
      image: https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80
      locationSubtitle: Prague Czech Republic
      locationTitle: Co-working space
      title: Work productivity

type: datasource.sqlite
options:
  provider: DATA_PROVIDER_DYNAMIC
  entities:
    - entity: default/location
  query: |
    SELECT
      '$.id',
      '$.title',
      '$.image',
      '$.address',
      '$.locationtitle',
      '$.locationsubtitle',
      '$.category'
    FROM [default/location] 
    WHERE '$.category' = "titles"

# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "4x4"
      children: 
        type: component.jig-widget
        options:
          jigId: titles-widget-image
          widgetId: image-title

The title/description of the place displayed on the location widget.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

widgets:
  location-title-s:
    type: widget.location
    options:
      viewPoint:  
       address: =@ctx.datasources.titles-static.address
      bottom:
        type: component.titles
        options:
          title: =@ctx.datasources.titles-static.locationTitle
          subtitle: =@ctx.datasources.titles-static.locationSubtitle
          align: left

widgets:
  location-titles-dd:
    type: widget.location
    options:
      viewPoint:
        address: =@ctx.datasources.titles.address
      bottom:
        type: component.titles
        options:
          title: =@ctx.datasources.titles.locationtitle
          subtitle: =@ctx.datasources.titles.locationsubtitle

# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: titles-widget-image
          widgetId: image-title

PreviousonPress

Nexttrend

Last updated 1 year ago

Was this helpful?

titles

Configuration options

Examples and code snippets

Titles in the image widget

Titles in the location widget