Televo Components

Components are fundamental elements that define the appearance, behavior, and data handling of UI elements. Understanding the structure and properties of these components is crucial for effective UI development.

Overview

Each component in the UI is defined using a JSON object, adhering to a specific structure. This structure includes several properties, each serving a distinct purpose in the component's behavior and presentation. The primary properties include type, data, style, and action.

Below is the basic JSON structure of a component:

{
    // Specifies the type of component
    "type": String, 
    // Holds the data the component will display or use
    "data": {
        "key": value,
    },
    // Defines the styling of the component
    "style": {
       "key": value,
    },
    // (Optional) Defines the action associated with the component
    "action": { 
        "type": String,
        "payload": {
            "key": value
        }
    }
}

Properties

Property	Type	Required	Description
type	String	Yes	Specifies the component type.
data	JSON Object	Yes	Contains the component's data.
style	JSON Object	Yes	Defines the component's styling.
action	JSON Object	No	(Optional) Describes the action associated with the component.

Detailed Property Description

Each property within the component's JSON structure plays a specific role. Here's a detailed look at each of these properties:

type

• Type: String (required)
• Description: Defines the type of component to be rendered. This property is crucial as it determines how the component is processed and displayed in the UI. For example, types could be button, text, image, etc.

data

• Type: JSON Object (required)
• Description: Contains the data that the component will display or utilize. The structure of data can vary significantly depending on the component's type. For instance, a text component might only need a simple text string, while a chart component might require a complex data set.

style

• Type: JSON Object (required)
• Description: Defines the styling of the component. This can include properties like color, margin, padding, font-size, and many others. The style object directly influences the visual appearance of the component.

action (Optional)

• Type: JSON Object (nullable)
• Description: Describes an action associated with the component, such as what happens when a user interacts with it (e.g., clicking a button). Not all components will have an action. The action property itself is an object that typically contains:
  • type: A string indicating the type of action (e.g., click, hover).
  • payload: An object holding additional data or parameters that the action might require.