Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Types

The GUI library defines a set of shared types used across all widgets. These types control layout, sizing, colors, fonts, and more. They are all defined in the top-level gui module: write them gui::Length, or import them by name, use gui::{Length, Padding}.

Layout Types

Length

Controls how a widget is sized along a single axis:

type Length = [`Fill, `FillPortion(i64), `Shrink, `Fixed(f64)];

Padding

Controls spacing between a widget’s border and its content:

type Padding = [
  `All(f64),
  `Axis({x: f64, y: f64}),
  `Each({top: f64, right: f64, bottom: f64, left: f64})
];

  • `All(px) – uniform padding on all sides.
  • `Axis({x, y}) – separate horizontal (x) and vertical (y) padding.
  • `Each({top, right, bottom, left}) – individual padding per side.
container(
  #padding: &`All(20.0),
  &text(&"Padded content")
);

container(
  #padding: &`Each({top: 10.0, right: 20.0, bottom: 10.0, left: 20.0}),
  &text(&"Different padding per side")
)

Size

A width/height pair used for window dimensions:

type Size = { width: f64, height: f64 };

HAlign and VAlign

Horizontal and vertical alignment for positioning content within a container:

type HAlign = [`Left, `Center, `Right];
type VAlign = [`Top, `Center, `Bottom];

column(
  #halign: &`Center,
  #width: &`Fill,
  &[text(&"Centered text")]
);

container(
  #halign: &`Center,
  #valign: &`Center,
  #width: &`Fill,
  #height: &`Fill,
  &text(&"Dead center")
)

Visual Types

Color

RGBA color with floating-point components in the range 0.0 to 1.0. Color is an abstract type — use the color constructor to create values. Components default to 0.0 except alpha which defaults to 1.0. Out-of-range values return an InvalidColor error.

// Solid red ($ swallows errors with a warning)
let red = color(#r: 1.0)$;

// Semi-transparent blue (? propagates errors)
let blue_50 = color(#b: 1.0, #a: 0.5)?

Colors are used in custom themes and per-widget style overrides. See the theming page for details.

Font Types

Fonts are described by family, weight, and style:

type FontFamily = [`SansSerif, `Serif, `Monospace, `Name(string)];
type FontWeight = [
  `Thin, `ExtraLight, `Light, `Normal, `Medium,
  `SemiBold, `Bold, `ExtraBold, `Black
];
type FontStyle = [`Normal, `Italic, `Oblique];
type Font = { family: FontFamily, weight: FontWeight, style: FontStyle };

  • FontFamily selects the font. `Name(string) allows loading a specific named font.
  • FontWeight ranges from `Thin (lightest) to `Black (heaviest).
  • FontStyle controls italic/oblique rendering.
text(
  #font: &{ family: `Monospace, weight: `Bold, style: `Normal },
  &"Monospace bold text"
)

Content Types

ScrollDirection

Controls which axes a scrollable widget allows scrolling on:

type ScrollDirection = [`Vertical, `Horizontal, `Both];

TooltipPosition

Controls where a tooltip appears relative to its target widget:

type TooltipPosition = [`Top, `Bottom, `Left, `Right, `FollowCursor];

ContentFit

Controls how an image or SVG is scaled within its bounds:

type ContentFit = [`Fill, `Contain, `Cover, `None, `ScaleDown];

You do not normally construct Widget variants directly. Each widget module exports a constructor function (e.g., gui::text::text(...), gui::button::button(...)) that returns Widget. This means a column’s children array has type Array<Widget> and can contain any mix of widgets:

use gui::{button::button, column::column, slider::slider, text::text};

let v = 50.0;

column(
  #spacing: &10.0,
  &[
    text(&"A text widget"),
    button(&text(&"A button")),
    slider(#min: &0.0, #max: &100.0, &v)
  ]
)