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:

• 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)

widgets:
  image-title:
    type: widget.image
    options:
      isContentOverlaid: true
      source:
        uri: [email protected]
      bottom:
        type: component.titles
        options:
          align: center
          title: [email protected]

title-widget (dynamic)

datasource (static)

datasource (dynamic)

grid-item

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-widget-location.jigx

widgets:
  location-title-s:
    type: widget.location
    options:
      viewPoint:  
       address: [email protected]
      bottom:
        type: component.titles
        options:
          title: [email protected]
          subtitle: [email protected]
          align: left

titles-widget-location-dd.jigx

grid-item