divider

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

Divider

This example demonstrates using dividers between components and creating a double-line divider between the horizontal list and the form.

divider.jigx

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: [email protected]
            item: 
              type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected] & ' mins'
                divider: solid
                horizontalItemSize: large
                leftElement: 
                  element: image
                  text: ''
                  uri: [email protected]
  # 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

datasource (static)