Components

expander

4min

The expander is a collapsible component with a small amount 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
﻿
﻿Configuration options﻿
﻿
Core structure
﻿
children
Define the content of the expander. The following components can be used in the expander:
﻿avatar﻿﻿
﻿bar-chart﻿﻿
﻿entity﻿﻿
﻿form﻿﻿
﻿interactive-image﻿﻿
﻿line-chart﻿﻿
﻿list﻿﻿
﻿location﻿﻿
﻿pie-chart﻿﻿
﻿stepper﻿﻿
﻿video-player﻿﻿
﻿web-view﻿﻿
header
centerElement - what is initially visible in your 
﻿. 
The following options are available in header:
component stage﻿
component titles﻿
Other options
﻿
isInitiallyCollapsed
false - expander is not collapsed.
true - If the expander is initially collapsed. True is the default setting.
leftElement
Add a left element, for example, an ordering number or avatar.
Actions
﻿
onContentPress
Action triggered while pressing on the content in the expander. Use IntelliSense (ctrl+space) to see the available list of actions. 
﻿Examples and code snippets ﻿
Expander with titles in a header, entity-fields and bar-chart
Expander with titles
﻿
Expander with bar-chart & entity-fields
﻿
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
﻿
Expander with stage in header and entity-field
Expander with stage
﻿
Expander with stage & entity
﻿
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
          
﻿
﻿

Core structure
children	Define the content of the expander. The following components can be used in the expander: avatar bar-chart entity form interactive-image line-chart list location pie-chart stepper video-player web-view
header	centerElement - what is initially visible in your . The following options are available in header: component stage component titles

Other options
isInitiallyCollapsed	false - expander is not collapsed. true - If the expander is initially collapsed. True is the default setting.
leftElement	Add a left element, for example, an ordering number or avatar.