Properties Panel

⚙️ Property Panel

The Property Panel is where you configure and customize each widget’s appearance, layout, and behavior. When you select a widget from the Canvas or Widget Tree, its properties are shown here.

---

🧱 Panel Structure

The panel is divided into two main sections:

---

1. 🧩 Default Properties

This section appears for almost all widgets and contains three key groups:

➕ Layout

• Visible: Toggle widget visibility at runtime.

• Width & Height: Set dimensions (PX, %,).

• Padding & Margin: Control spacing inside and around the widget.

• Alignment: Use quick-align buttons to position elements horizontally or vertically.

🎨 Appearance

• Fill Color: Background color of the widget.

• Border Radius: Controls corner roundness.

• Border: Set border style, color, and width.

⚡ Interactions

• onClick: Define event-based actions like navigation, updating state, calling functions, etc.

---

2. 📦 Additional Properties

Below the default properties, each widget shows its own set of properties depending on its type.

• For example, a Text widget may show font controls, while an Image widget will show source and fit options.

• These settings are contextual and may include content, media, data bindings, styling, and logic options.

---

📝 Note: Some widgets may not include all three default sections, and the additional properties are entirely dependent on the selected widget’s type and capabilities.

The Property Panel gives you full control over how a widget behaves and appears inside your app.