titles

5min

The titles component displays a title, subtitle, comment, or any type of text content with an icon which is optional. 
Titles Preview
﻿
﻿Configuration options﻿
﻿
Core structure
﻿
title
Add text on the centerElements of the component.expander. You can add text, expressions or Text with Format in the field. Text with format includes, currency, decimal, dateTime and more.
Other options
﻿
align
The alignment of the content inside of your component. Where the container and text should be aligned, the options are:
left
right
center
icon
Add an icon to the title. A list of icons is available. See Jigx icons﻿ for more information.
iconColor
Sets the color of the icon, choose a color from the provided color palette. Default color is black if the property is not specified in the YAML. See the list of available colors in Jigx color palette﻿.
style
The following styling sets are available:
isNegative
isPositive
isWarning
subtitle
Add a  subtitle/ short description of the component.
Consideration
component.titles can only be used in the centerElement of the  component.expander
﻿Examples and code snippets ﻿
Expander with titles in a header
Expander with titles
﻿
﻿
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 dynamic data in GitHub. 
expander (static)
expander (dynamic)
datasources (dynamic)
children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            title: July Nelson
            subtitle: Manager
            icon: person
            align: left
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Phone
                        value: "3249432812"
                    - type: component.entity-field
                      options:
                        label: Email
                        value: [email protected]
              - type: component.entity-field
                options:
                  label: Address
                  value: 141 Harbor Dr Claymont, Delaware(DE), 19703
        - type: component.bar-chart
          options:
            chart:
              title: 
                text: Last year revenue
            legend:
              isHidden: true
            series:
              - data: [email protected]
children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            title: July Nelson
            subtitle: Manager
            icon: person
            align: left
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Phone
                        value: "3249432812"
                    - type: component.entity-field
                      options:
                        label: Email
                        value: july@first.com
              - type: component.entity-field
                options:
                  label: Address
                  value: 141 Harbor Dr Claymont, Delaware(DE), 19703
        - type: component.bar-chart
          options:
            chart:
              title: 
                text: Last year revenue
            legend:
              isHidden: true
            series:
              - data: =@ctx.datasources.series1
﻿
﻿

Core structure
title	Add text on the centerElements of the component.expander. You can add text, expressions or Text with Format in the field. Text with format includes, currency, decimal, dateTime and more.

Other options
align	The alignment of the content inside of your component. Where the container and text should be aligned, the options are: left right center
icon	Add an icon to the title. A list of icons is available. See Jigx icons for more information.
iconColor	Sets the color of the icon, choose a color from the provided color palette. Default color is black if the property is not specified in the YAML. See the list of available colors in Jigx color palette.
style	The following styling sets are available: isNegative isPositive isWarning
subtitle	Add a subtitle/ short description of the component.

Updated 24 Jul 2024

Did this page help you?

stage

form

titles

﻿Configuration options﻿

Core structure

Other options

Consideration

﻿Examples and code snippets ﻿

Expander with titles in a header

Configuration options

Examples and code snippets