Panel and Window

When you are creating a user interface with MiniComps, it’s often to control some dynamic content elsewhere on the same page. So it’s nice to separate the settings components from the content it is controlling. The Panel and Window components serve this purpose.

Panel

The Panel creates a background and visible grouping for the ui you are creating with MiniComps.

Example:

const panel = new Panel(document.body, 20, 20, 200, 200);

Now you can use the panel as the parent for other components.

new Button(panel, 20, 20, "Hello, world!");
new TextInput(panel, 20, 50, "Write on!");

NOT using a Panel

You can create your ui with MiniComps anywhere on the DOM, just use a reference to the container you want to use as a parent. If doing this, you should make sure that the container has a position style of relative or absolute if you want your component positions to be in relation to the position of that container.

Example:

const panel = document.createElement("div");
document.body.appendChild(../panel);
panel.style.marginLeft = "100px";
panel.style.marginTop = "100px";
panel.style.position = "relative";

new Button(panel, 20, 20, "Hello, world!");
new TextInput(panel, 20, 50, "Write on!");

Window

The Window component is very similar to the Panel, but it is moveable and minimizable. It contains a title bar that makes the window draggable. And a button that will hide the content area of the window, leaving only the title bar.

Example:

const win = new Window(document.body, "My Window", 20, 20, 200, 200);

Now you can use the panel as the parent for other components.

new Button(win, 20, 20, "Hello, world!");
new TextInput(win, 20, 50, "Write on!");

If you like the look of the window but don’t want it to be draggable or minimizable, you can toggle those capabilities with the draggable and minimizable properties. Set those to false and you have a static panel with a title bar.