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 ﻿
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
﻿
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.