Components

jig-header

5min

The jig-header component can be used in any type of 
﻿. It serves as a container for specifying headers. It cannot be used without a component image﻿, location﻿, or video-player﻿ inside the component.
The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline.  For more details, refer to Assets﻿.
﻿Configuration options﻿
﻿
Core structure
﻿
children
Specifies which component will be used inside the jig-header. There are three options:
﻿component.image﻿﻿
﻿component.location﻿﻿
﻿component.video player﻿﻿
height
Specifies the height of the header.
small
medium
﻿
﻿Examples and code snippets ﻿
Jig-header with image
Header with image
﻿
Header with image
﻿
This example shows a component.jig-header with property children: component.imageand 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.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 component.jig-header with property children: component.location and 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 component.jig-header with property children: component.video-player. and 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://cdn.pixabay.com/video/2023/10/01/183108-870151713_small.mp4
        title: video-player
        autoplay: false
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: https://cdn.pixabay.com/video/2023/10/01/183108-870151713_small.mp4
        title: video-player
        autoplay: false
﻿
﻿

Core structure
children	Specifies which component will be used inside the jig-header. There are three options: component.image component.location component.video player
height	Specifies the height of the header. small medium

Updated 24 Jul 2024

Did this page help you?

Common component properties

avatar

jig-header

﻿Configuration options﻿

Core structure

﻿Examples and code snippets ﻿

Jig-header with image

Jig-header with location

Jig-header with video-player

Configuration options

Examples and code snippets