🖼️ Window

The Window (win) widget is a high-level container that simulates a desktop-style window. It consists of two distinct areas: a Header (for titles and control buttons) and a Content Area (for the main UI elements). It is ideal for settings menus, detailed diagnostics, or modular pop-ups.

---

⚙️ Properties (Props)

The Window configuration is defined by the WindowWidget interface. It manages the layout of the header and the scrollable behavior of the content.

Property	Type	Description
Title	string	The text displayed in the header bar.
Header Height	number	The vertical size of the top bar in pixels.
Buttons	Icon[]	An array of icons for the header (e.g., Close, Settings).
Scrollable	boolean	Enables vertical/horizontal scrolling for the content area.

---

🛠 Window Structure

The Window is divided into two child objects that can be styled independently:

1. The Header: A horizontal strip at the top. You can add Buttons here to allow users to close the window or access sub-menus.
2. The Content: A Container-like area below the header. If your content is larger than the window's height, the window will automatically enable scrollbars.

---

🎨 Visual Styling

In the Inspector Panel, you can define the physical look of the window:

• Header Style: Set the background color and bottom border of the top bar.
• Content Style: Adjust the padding and background of the main workspace.
• Shadow & Radius: Apply a shadow to the entire window to make it "float" above the Screen and round the corners for a modern feel.

---

⚡ Runtime API (Lua)

Windows are often used as dynamic overlays in the Logic and Events system.

-- Update the window title dynamically
win_diag:set_title("Diagnostics - Error 404")

-- Add a button to the header programmatically
local btn = win_diag:add_button(LV_SYMBOL_CLOSE)
btn:add_event_cb(function() 
    win_diag:set_hidden(true)
end)

-- Scroll the content to the top
win_diag:scroll_to(0, 0, true)

-- Move the entire window position
win_diag:set_pos(50, 50)

---

MODAL WINDOWS

To create a "Modal" effect, place a full-screen, semi-transparent Container behind the Window. This prevents users from clicking widgets on the main screen until the Window is closed.

---

🚀 Next Steps

• Message Box — A simplified, automated version of the Window for quick alerts.
• Container — Use a standard container if you don't need a header bar.
• Logic and Events — Learn how to make Windows draggable across the screen.