titles

5min

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 main page - on the first/front view of the jig. 
To name a list of widgets where titles are available: 
﻿avatar﻿
﻿chart﻿
﻿image﻿
﻿location﻿
﻿status﻿
﻿value﻿
﻿Configuration options﻿
title and subtitle - The main part displaying the text content
icon, align, and style - Tools for the component styling
﻿Examples and code snippets ﻿
Titles in image widget
﻿
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: =@ctx.datasources.titles-static.image
      bottom:
        type: component.titles
        options:
          align: center
          title: =@ctx.datasources.titles-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
﻿
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: =@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:
  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
﻿
See also
﻿Developer reference﻿
﻿Widgets samples solution - It can be downloaded on our Jigx Management (the Quick Start section)
﻿