Components
divider

2min
A divider is a simple yet effective UI component that creates a visual separation between components. It helps improve readability, structure content, and enhance user experience by distinguishing different sections. Common use cases include grouping related content or enhancing visual hierarchy.
﻿Examples and code snippets ﻿
Dividers
﻿
This example demonstrates using dividers between components and creating a double-line divider between the horizontal list and the form.
divider.jigx
datasource (static)
children:
  - type: component.section
    options:
      title: Available cleaning options
      children:
        # Add a simple line divider between components.      
        - type: component.divider
        - type: component.list
          instanceId: service-list
          options:
            isHorizontal: true
            isHorizontalScrollIndicatorHidden: false
            # Data configured to use datasource (static) 
            data: =@ctx.datasources.repair-services-static
            item: 
              type: component.list-item
              options:
                title: =@ctx.current.item.service
                subtitle: =@ctx.current.item.time & ' mins'
                divider: solid
                horizontalItemSize: large
                leftElement: 
                  element: image
                  text: ''
                  uri: =@ctx.current.item.image
  # Add multiple dividers between components.
  # A double line divider is made by stacking two component.divider components.                 
  - type: component.divider
  - type: component.divider
  - type: component.form
    instanceId: service-appt
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: fullName
          options:
            label: Full Name
        - type: component.field-row
          options:
            children:
              - type: component.number-field
                instanceId: contact
                options:
                  label: Contact Number
              - type: component.date-picker
                instanceId: appoint-date
                options:
                  label: Service Date
  # Add a simple line divider between components.                   
  - type: component.divider
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: ' '
            value: Thank you for your support
children:
  - type: component.section
    options:
      title: Available cleaning options
      children:
        # Add a simple line divider between components.      
        - type: component.divider
        - type: component.list
          instanceId: service-list
          options:
            isHorizontal: true
            isHorizontalScrollIndicatorHidden: false
            # Data configured to use datasource (static) 
            data: =@ctx.datasources.repair-services-static
            item: 
              type: component.list-item
              options:
                title: =@ctx.current.item.service
                subtitle: =@ctx.current.item.time & ' mins'
                divider: solid
                horizontalItemSize: large
                leftElement: 
                  element: image
                  text: ''
                  uri: =@ctx.current.item.image
  # Add multiple dividers between components.
  # A double line divider is made by stacking two component.divider components.                 
  - type: component.divider
  - type: component.divider
  - type: component.form
    instanceId: service-appt
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: fullName
          options:
            label: Full Name
        - type: component.field-row
          options:
            children:
              - type: component.number-field
                instanceId: contact
                options:
                  label: Contact Number
              - type: component.date-picker
                instanceId: appoint-date
                options:
                  label: Service Date
  # Add a simple line divider between components.                   
  - type: component.divider
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: ' '
            value: Thank you for your support
﻿
﻿
Updated 03 Feb 2025
Did this page help you?
count-up
entity
divider

﻿Examples and code snippets ﻿

Examples and code snippets
