View (Alpha)

This feature is currently in its Alpha stage of development.

• As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.

• In this phase, the feature may contain bugs or behave unpredictably.

• Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.

• We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.

The component.view is an empty container similar to the <div> element in CSS or HTML. Use the view component for layouts. The YAML always has the style: property under which all style elements such as color and direction for rows and columns are located, and the children: property for adding other components such as avatar, text, and icons. Multiple layers of the view component can be used to create UI requirements. You can also place a component.card inside the view and vice versa. If you are unfamiliar with CSS or HTML, there are several resources available, such as https://www.w3schools.com/, that can assist you when configuring a view component.

For steps on creating a custom component, see How to create a custom component.

Configuration options

You can use when and instanceId with component.view, add the properties before the options: property. The available list of style options is shown below.

Options	Value
alignContent	Determine how content in the view will be aligned, applies to any component contained in the view. The following options are available: center flex-end flex-start space-around space-between stretch
alignItems	Available options include: baseline center flex-end flex-start stretch
alignSelf	Available options include: auto baseline center flex-end flex-start stretch
background	color - multiple, use IntelliSense to view the available list. See to view the different colors. emphasis - change the brightness and boldness of the content in the view. Available options include: - high - medium - low - extra-low - low-medium
border	Configure the border using these properties: bottom color - multiple, use IntelliSense to view the available list. emphasis - color, high, medium, low, extra-low, low-medium end left right start - style style - solid, transparent, true top width - use a number or expression.
bottom	Configure the spacing at the bottom of the view using these properties: large medium small regular minimal none
emphasis	Change the brightness and boldness of the content in the view. Available options include: high medium low extra-low low-medium
flex	Available options include: basis- use a number or expression. direction - column, column-reverse, row, row-reverse grow - use a number or expression shrink - use a number or expression wrap - wrap, nowrap, wrap-reverse For more information on using the flex property, see
gap	Configure the gap in the view. Available options include: column - large, medium, small, regular, minimal, none large medium none minimal regular row - large, medium, small, regular, minimal, none small
hasShadow	A boolean property used to toggle the display of a shadow beneath the component. When set to true, the control renders with a subtle shadow effect, helping it stand out visually against the background. This enhances the visual hierarchy and depth in the mobile app interface. When set to false (or omitted), no shadow is applied.
height	Determine the height of the view. Available options include: max min value
justifyContent	Available options include: center flex-end flex-start space-around space-between space-evenly
left	Available options include: large medium small regular minimal none
margin	Configure different margins in the view, available options include: bottom - large, medium, small, regular, minimal, none end - large, medium, small, regular, minimal, none horizontal - large, medium, small, regular, minimal, none large left - large, medium, small, regular, minimal, none medium minimal none regular right - large, medium, small, regular, minimal, none small start - large, medium, small, regular, minimal, none top - large, medium, small, regular, minimal, none vertical - large, medium, small, regular, minimal, none
overflow	Available options include: hidden scroll visible
padding	Configure different paddings in the view, available options include: bottom - large, medium, small, regular, minimal, none end - large, medium, small, regular, minimal, none horizontal - large, medium, small, regular, minimal, none large left - large, medium, small, regular, minimal, none medium minimal none regular right - large, medium, small, regular, minimal, none small start - large, medium, small, regular, minimal, none top - large, medium, small, regular, minimal, none vertical - large, medium, small, regular, minimal, none
position	Available options include: absolute relative
radius	Available options include: large medium regular small tiny bottomLeft - large, medium, regular, small, tiny bottomrRight - large, medium, regular, small, tiny topRight - large, medium, regular, small, tiny topLeft - large, medium, regular, small, tiny
right	Available options include: large medium small regular minimal none
top	Available options include: large medium small regular minimal none
width	Available options include: max min value

Considerations

• When using the component.image on custom components, the isFlexible property is available. If the property is set to true, the image will take the parent's space. If the parent has zero height or zero width, the image will not render. Set the height and width on the image, or set isFlexible to true.

• When using the component.image in the component.view to define the height, e.g., 100, and setting isFlexible: true for each image. This allows the images to grow into the parent component space.

• In styles, you cannot use flexGrow and width together. Use one or the other; if combined, the width property does not function, and the UI element will not render as designed.

• By default, children components are stacked in a column.

• To ensure that text and icons do not run over borders in the app, use flex:grow:1 and shrink:1 together.

Example and code samples

Itinerary using views to create columns and rows

This example shows using the component.view to create the layout for an itinerary. The view component creates a wrapper for the content, rows to show content in, and columns to create spacing between the content. The component.text is used inside the view component to show the content and the component.image shows the required images.

Examples:

1. See the jig example in GitHub.

2. See the custom component in GitHub.

Itinerary view

itinerary-day.jigx

type: component.default
children:
  # WRAPPER - use the view component as a container for other components
  - type: component.view
    options:
      style:
        flex:
          direction: row  
          grow: 1
        padding: 
          horizontal: medium
          bottom: medium
        gap: medium
        justifyContent: flex-start
        alignItems: flex-start
      children:
        # TIME - use a view component to create the layout for a time column
        - type: component.view
          options:
            style:
              flex:
                direction: column
              emphasis: medium
              width: 50
            children:
              - type: component.text
                options:
                  value: [email protected]
                  align: left
        # CONTENT - use the view component to design the layout of content such as text in rows, and spaces between text
        - type: component.view
          options:
            style:
              flex:
                direction: column
                grow: 1
                shrink: 1
              gap: small
              border:
                bottom:
                  style: solid
                  emphasis: extra-low
              padding: 
                bottom: medium
                  
            children:
              - type: component.view
                options:
                  style:
                    flex: 
                      direction: row
                    justifyContent: flex-start
                    alignItems: center
                    gap: small
                  children:
                    - type: component.text
                      when: [email protected]
                      options:
                        value: [email protected]
                        align: left
                        weight: bold
                    - type: component.view
                      when: [email protected] = true ? true:false
                      options:
                        style:
                          background:
                            color: color3
                          padding: 
                            vertical: minimal
                            horizontal: small
                          radius: tiny
                          flex: 
                            grow: 0
                          alignSelf: flex-start
                        children:
                        - type: component.text
                          options:
                            value: Extra
                            size: small
                                    
              - type: component.text
                when: [email protected] != null ? true :false
                options:
                  value: [email protected]
                  align: left
                  emphasis: medium
                  size: small
              - type: component.text
                when: [email protected] != null ? true :false
                options:
                  value: [email protected]
                  align: left
                  emphasis: medium
                  size: small
              - type: component.view
                when: [email protected] != null ? true :false
                options:
                  style: 
                    flex: 
                      direction: row
                    gap: small
                    height: 100
                  children:
                    - type: component.image
                      options:
                        source:
                          uri: [email protected]
                        isFlexible: true
                    - type: component.image
                      options:
                        source:
                          uri: [email protected]
                        isFlexible: true
                    - type: component.image
                      options:
                        source:
                          uri: [email protected]
                        isFlexible: true                                          

itinerary.jigx

Other view layout examples

Explore a variety of additional code examples demonstrating the use of the view component on GitHub. These examples showcase different configurations and use cases to help you achieve different layouts.

• Layouts 1 - 10