List

Overview

The List component is a flexible and efficient way to display a collection of items in either a vertical or horizontal scrolling format. It is designed to accommodate various item types and can dynamically adapt to the content's size and shape. This component is particularly useful for creating lists of data entries, images, or other elements, making it an essential tool for presenting organized, scrollable content within applications.

Data Properties

The data properties specify the content and structure of the List component. These properties determine how each item in the list is rendered and managed:

Property	Type	Description
items	[JSON]	An array of data objects that will be used to generate the list items.
child	Component	A template component that defines how each item in the list should be displayed.

items

• Type: [JSON]
• Description: Contains the data for each item that will be rendered in the list. The structure of each JSON object should match the expected data structure of the child component template.

child

• Type: Component
• Description: Defines the layout and appearance of each item in the list. This component can be any type (e.g., Card, Row, Column) and will use the data provided in items to render each list item according to the template specified here.

Style Properties

info

The style properties are optional. If not specified, default values will be used.

These properties allow customization of the List component's appearance and behavior:

Certainly! Here is the updated table with the required column added between the platform and description columns:

Property	Type	Platform	Required	Description
height	Float	android, iOS	false	The vertical size of the list component.
width	Float	iOS	false	The horizontal size of the list component.
axis	String	android, iOS	false	Specifies the scroll direction of the list: "vertical" or "horizontal".
itemSpacing	Int	android, iOS	false	The space between adjacent items in the list.
showIndicator	Bool	iOS	false	Controls the visibility of the scroll indicator.
padding	JSON	android, iOS	false	Adjusts the padding around the entire list component.

height

• Type: Float (optional)
• Description: Sets the height of the list, allowing for control over how much space the list occupies vertically within a layout.

width

• Type: Float (optional)
• Description: Determines the width of the list, providing flexibility in integrating the list horizontally within various UI designs.

axis

• Type: String (optional)
• Description: Defines the scrolling direction of the list. A value of "vertical" enables vertical scrolling, while "horizontal" allows for horizontal scrolling.

itemSpacing

• Type: Int (optional)
• Description: Specifies the amount of space between each item in the list, ensuring that items are evenly spaced and visually distinct.

showIndicator

• Type: Bool (optional)
• Description: Indicates whether the scrolling indicator is shown. This can enhance user awareness of scrollable content but may be hidden for a cleaner look.

padding

• Type: JSON (optional)
• Description: Provides the ability to specify padding around the list component. This is defined as a JSON object with properties for top, right, bottom, and left, allowing precise control over the list's positioning within its container.

Sample

    {
        "type": "list",
        "data": {
            "items": [
                {
                    "postId": 1,
                    "id": 1,
                    "name": "id labore ex et quam laborum",
                    "email": "Eliseo@gardner.biz",
                    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
                },
                {
                    "postId": 1,
                    "id": 2,
                    "name": "quo vero reiciendis velit similique earum",
                    "email": "Jayne_Kuhic@sydney.com",
                    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
                },
                {
                    "postId": 1,
                    "id": 3,
                    "name": "odio adipisci rerum aut animi",
                    "email": "Nikita@garfield.biz",
                    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
                },
                {
                    "postId": 1,
                    "id": 4,
                    "name": "alias odio sit",
                    "email": "Lew@alysha.tv",
                    "body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
                },
                {
                    "postId": 1,
                    "id": 5,
                    "name": "vero eaque aliquid doloribus et culpa",
                    "email": "Hayden@althea.biz",
                    "body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
                }
            ],

            "child": {
                "type": "card",
                "data": {
                    "child": {
                        "type": "row",
                        "data": {
                            "children": [
                                {
                                    "type": "text",
                                    "data": {
                                        "text": "{{data.id}}"
                                    },
                                    "style": {
                                        "fontSize": 18,
                                        "fontColor": "080c14",
                                    }
                                },
                                {
                                    "type": "spacer",
                                    "data": {
                                        "minLength": 10
                                    }
                                },
                                {
                                    "type": "text",
                                    "data": {
                                        "text": "{{data.name}}"
                                    },
                                    "style": {
                                        "fontSize": 18,
                                        "fontColor": "080c14",
                                    }
                                }
                            ]
                        },
                        "style": {
                            "padding": {
                                "left": 12,
                                "right": 12
                            }
                        }
                    }
                },
                "style": {
                    "backgroundColor": "ffe3d3",
                    "backgroundColorDark": "FFC0CB",
                    "borderColor": "000000",
                    "borderColorDark": "000000",
                    "borderWidth": 1,
                    "elevation": 0,
                    "borderRadius": 8,
                    "shadowColor": "000000",
                    "shadowColorDark": "ffffff",
                    "shadowRadius": 0,
                    "height": 50,
                    "cardY": 0
                }
            }
        },
        "style": {
            "axis": "vertical",
            "itemSpacing": 8,
        }
    }

This configuration outlines a List component designed to display items vertically, with specified dimensions and styling options. It includes a sample item structure and a child component template, demonstrating how to create a cohesive and customizable list within an application.