Components

jig-header

7min

The jig-header component can be used in any type of jig. It serves as a container for specifying headers. It cannot be used without a component image﻿, location﻿, or video-player﻿ inside that component.
The images can be preloaded and cached by using the assets property in your index.jigx file. The images will be displayed even when you are offline.  For more details please refer to the Index settings﻿﻿
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
height - Specifies the height of the header.
Small
Medium
 children - Specifies which component will be used inside the jig-header.
﻿component.image﻿﻿
﻿component.location﻿﻿
﻿component.video player﻿﻿
﻿Examples and code snippets ﻿
Jig-header with image
Header with image
﻿
Header with image
﻿
This example shows a jig-header component with property children: component.image. And on the screenshots, we can see the difference between the set heights.
small
medium
|
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://builder.jigx.com/assets/images/header.jpg
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://builder.jigx.com/assets/images/header.jpg
﻿
Jig-header with location
Small - header with location
﻿
Medium - header with location
﻿
This example shows a jig-header component with property children: component.location. And on the screenshots, we can see the difference between the set heights.
Examples:
Small: See the full code sample using static data in GitHub. 
Medium: See the full code sample using static data in GitHub. 
small
medium
|
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.location
      options:
        address: 20 W 34th St., New York, NY 10001, USA
        zoomLevel: 8
        isAnimationDisabled: false
        markersData:
          - lat: 40.7484445
            lng: -73.9878531
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.location
      options:
        address: 20 W 34th St., New York, NY 10001, USA
        zoomLevel: 8
        isAnimationDisabled: false
        markersData:
          - lat: 40.7484445
            lng: -73.9878531
﻿
Jig-header with video-player
Small - header with video player
﻿
Medium - header with video player
﻿
This example shows a jig-header component with property children: component.video-player. And on the screenshots, we can see the difference between the set heights.
Examples:
Small: See the full code sample using static data in GitHub. 
Medium: See the full code sample using static data in GitHub. 
small
medium
|
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: https://player.vimeo.com/external/510534971.sd.mp4?s=feaf03f65dc961bf98dcecbbbdcf21db84204536&profile_id=164&oauth2_token_id=57447761
        title: video-player
        autoplay: false
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: https://player.vimeo.com/external/510534971.sd.mp4?s=feaf03f65dc961bf98dcecbbbdcf21db84204536&profile_id=164&oauth2_token_id=57447761
        title: video-player
        autoplay: false
﻿
See also
﻿Related examples (GitHub)﻿
﻿

Updated 14 Jul 2023

Did this page help you?

Common component properties

avatar

Docs powered by

Archbee

TABLE OF CONTENTS

Configuration options

Examples and code snippets

Jig-header with image

Jig-header with location

Jig-header with video-player

jig-header

﻿Configuration options﻿

﻿Examples and code snippets ﻿

Jig-header with image

Jig-header with location

Jig-header with video-player

See also

Configuration options

Examples and code snippets