titles

4min

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: 
﻿avatar﻿
﻿chart﻿
﻿image﻿
﻿location﻿
﻿status﻿
﻿value﻿
﻿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 ﻿
Titles in the image widget
Image widget with titles
﻿
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.
titles-widget (static)
title-widget (dynamic)
widgets:
  4x4:
    type: widget.image
    options:
      isContentOverlaid: true
      source:
        uri: [email protected]-static.image
      bottom:
        type: component.titles
        options:
          align: center
          title: [email protected]-static.title
widgets:
  4x4:
    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
﻿
Titles in the location widget
Location widget with titles
﻿
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.
﻿
titles-location (static)
titles-location (dynamic)
widgets:
  2x2:
    type: widget.location
    options:
      address: [email protected]-static.address
      bottom:
        type: component.titles
        options:
          title: [email protected]-static.locationTitle
          subtitle: [email protected]-static.locationSubtitle
          align: left
widgets:
  2x2:
    type: widget.location
    options:
      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
﻿
﻿

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.

Updated 23 Aug 2024

Did this page help you?

onPress

trend

titles

﻿Configuration options﻿

Core structure

Other options

﻿Examples and code snippets ﻿

Titles in the image widget

Titles in the location widget

Configuration options

Examples and code snippets