Components
expander

5min
The expander is a collapsible component with a small bit of content initially visible, such as a name, and additional content will be visible after it is opened. An expander is expanded by clicking on the arrow that will appear on the right side of the component.

Expander Preview
﻿
The expander can be split into two parts.
Header - what is initially visible in your jig.
In the header you can use:
﻿stage﻿
﻿titles﻿
Children - what will be visible after the component is expanded.
In the header you can use:
﻿avatar﻿
﻿bar-chart﻿
﻿entity﻿
﻿form﻿
﻿image﻿
﻿interactive-image﻿
﻿line-chart﻿
﻿list﻿
﻿location﻿
﻿pie-chart﻿
﻿stepper﻿
﻿video-player﻿
﻿web-view﻿
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes: centerElement - here you can choose from two options: 
component stage﻿
component titles﻿
﻿Examples and code snippets ﻿
Expander with titles in a header, entity-fields and bar-chart
﻿
﻿
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: 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
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
﻿
Expander with stage in header and entity-field
﻿
﻿
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-trip (static)
expander-trip (dynamic)
datasources (dynamic)
|
children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.stage
          options:
            right:
              title: Boston
            left:
              title: New York
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Passanger name
                        value: July Nelson
                    - type: component.entity-field
                      options:
                        label: Date
                        value: 25 Jul
                    - type: component.entity-field
                      options:
                        label: Time
                        value: 12:30
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: From
                        value: Boston
                    - type: component.entity-field
                      options:
                        label: Flight
                        value: A 0123
                    - type: component.entity-field
                      options:
                        label: Seat
                        value: 12F
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: To
                        value: New York
                    - type: component.entity-field
                      options:
                        label: Gate
                        value: '16'
                    - type: component.entity-field
                      options:
                        label: Board till
                        value: 11:30
          
children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.stage
          options:
            right:
              title: Boston
            left:
              title: New York
      children:
        - type: component.entity
          options:
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Passanger name
                        value: July Nelson
                    - type: component.entity-field
                      options:
                        label: Date
                        value: 25 Jul
                    - type: component.entity-field
                      options:
                        label: Time
                        value: 12:30
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: From
                        value: Boston
                    - type: component.entity-field
                      options:
                        label: Flight
                        value: A 0123
                    - type: component.entity-field
                      options:
                        label: Seat
                        value: 12F
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: To
                        value: New York
                    - type: component.entity-field
                      options:
                        label: Gate
                        value: '16'
                    - type: component.entity-field
                      options:
                        label: Board till
                        value: 11:30
          
﻿
﻿