Controls and Layout

日本語

UIng provides native controls for displaying text, accepting input, choosing values, showing progress, working with menus, and presenting tabular data. Common starting points include Label, Button, Entry, Checkbox, Combobox, Slider, and ProgressBar.

Containers

A window has one child. Use a container when an interface needs more than one control:

  • Box arranges children horizontally or vertically.
  • Form aligns labels with input controls.
  • Grid places controls in rows and columns.
  • Group places a title around one child.
  • Tab organizes controls into pages.

This example arranges controls in a vertical Box:


box = UIng::Box.new(:vertical, padded: true)
box.append(UIng::Label.new("Name"))
box.append(UIng::Entry.new)
box.append(UIng::Button.new("Save"))

window.child = box

Use box.append(editor, stretchy: true) to give an editor the remaining height. For complex layouts, nest containers and assign the outermost one to the Window (see the Box example and control gallery).

Space allocation and alignment

Allocating extra space and placing children within it are separate decisions.

Container Space allocation Placement within that space
Box stretchy distributes space along the layout direction A stretchy child fills that direction
Form stretchy distributes height A stretchy control grows vertically; controls always fill the input column horizontally
Grid hexpand and vexpand expand columns and rows halign and valign set alignment; :fill fills the allocation

Box and Form combine allocation and stretching, with no separate fill argument. Use Grid to control expansion and alignment independently. padded sets gaps between children; margined sets outer margins. Neither controls stretching.

Platform differences

Diagrams show layout bounds, which may differ from a control's visible parts. macOS Spinbox centers its input field and stepper at their natural heights; Windows sizes the input field to the allocated height. Minimum sizes, text placement, and standard spacing also vary by OS.

Widget guides