Sprites.Ui.Window
Titled panels, modal or floating.
Sprites.Ui.Window.Floating Void
Sprites.Ui.Window.Floating(visible, title, hasClose, resizeable, coords, content)
A floating window, shown while visible is true. It drags by its title bar; hasClose adds a close button, and resizeable adds grips to drag its edges and corners. coords is the window's live rect that the caller owns and seeds with the opening position and size; a drag writes the clamped rect back to it, so it is the single source of truth and a window closed and reopened returns to where and how big it was. Seed left or top with Sprites.Ui.Window.far to dock flush against the right or bottom edge.
| Input | Type | Description |
|---|---|---|
visible | Sprites.Reactive.Value | Shows the window while true. A close button clears it. |
title | String or Sprites.Reactive.Value | The title bar text and drag handle. |
hasClose | Boolean | Adds a close button. |
resizeable | Boolean | Adds grips to drag the edges and corners. A resizeable window takes its size from coords; a fixed window sizes to its content. |
coords | Sprites.Reactive.Value | The window's live rect { left, top, width, height }, owned and seeded by the caller. A drag writes the clamped rect back, so a close and reopen returns there. A resizeable window reads its size here; a fixed window needs only left and top. Seed left or top with Sprites.Ui.Window.far to dock against the right or bottom edge. |
content | Function | Builds the window body. Last, so it reads as the trailing block. |
Returns nothing.
const open = Sprites.Reactive.Value(false);
const name = Sprites.Reactive.Value('Hero');
const coords = Sprites.Reactive.Value({ left: 80, top: 80, width: 320, height: 220 });
Sprites.Ui.Button.SetValue(open, true, 'Open tools');
Sprites.Ui.Window.Floating(open, 'Tools', true, true, coords, () => {
Sprites.Ui.Content.Area(() => {
Sprites.Ui.Input.Text(name);
});
});Sprites.Ui.Window.Modal Void
Sprites.Ui.Window.Modal(visible, title, width, height, content)
A modal window over a backdrop, shown while visible is true. It rides the 'modal' overlay region, so it centres over the nearest modal region, or the whole window when there is none, and never lands in a loading region between them. Width and height are optional.
| Input | Type | Description |
|---|---|---|
visible | Sprites.Reactive.Value | Shows the window over a backdrop while true. |
title | String or Sprites.Reactive.Value | The title bar text. |
width | Number | Optional width in pixels. |
height | Number | Optional height in pixels. |
content | Function | Builds the window body. |
Returns nothing.
const open = Sprites.Reactive.Value(false);
const name = Sprites.Reactive.Value('Hero');
Sprites.Ui.Button.SetValue(open, true, 'Rename');
Sprites.Ui.Window.Modal(open, 'Rename', 320, undefined, () => {
Sprites.Ui.Content.Area(() => {
Sprites.Ui.Input.Text(name);
});
Sprites.Ui.Window.Footer(() => {
Sprites.Ui.Button.SetValue(open, false, 'Done');
});
});