Skip to content

Widgets Display

mike-ward edited this page May 17, 2026 · 2 revisions

Display Widgets

Display widgets render read-only content. They have no edit state; output depends only on the data passed in each frame.


Text

gui.Text(gui.TextCfg{...}) is the primary text widget. It supports wrapping, multiple text styles, and advanced rendering via the go-glyph engine: gradients, outlines, rotation, and arbitrary affine transforms.

Basic usage

gui.Text(gui.TextCfg{
    Text:      "Hello, world!",
    TextStyle: gui.CurrentTheme().B1,
})

Wrapping

gui.Text(gui.TextCfg{
    Text:      longParagraph,
    Mode:      gui.TextModeWrap,
    TextStyle: gui.CurrentTheme().N3,
})

Gradient text

gui.Text(gui.TextCfg{
    Text: "Rainbow",
    TextStyle: gui.TextStyle{
        Size: 28,
        Gradient: &glyph.GradientConfig{
            Kind:   glyph.GradientHorizontal,
            Colors: []glyph.GradientStop{
                {Color: gui.RGBA(255, 0, 0, 255), Position: 0},
                {Color: gui.RGBA(0, 0, 255, 255), Position: 1},
            },
        },
    },
})

Rotated text

gui.Text(gui.TextCfg{
    Text: "Rotated",
    TextStyle: gui.TextStyle{
        Size:            18,
        RotationRadians: 0.35,
    },
})

Typography tokens

Themes expose two sets of text styles:

  • N1–N5 — neutral/UI text (labels, captions, helper text)
  • B1–B5 — body text (readable content, descriptions)

Access them via gui.CurrentTheme().N3 or gui.CurrentTheme().B1. Lower numbers are larger.


Image

gui.Image(gui.ImageCfg{...}) renders a raster image loaded from a file or byte slice.

gui.Image(gui.ImageCfg{
    Path:   "assets/logo.png",
    Width:  120,
    Height: 120,
    Sizing: gui.FixedFixed,
})

Svg

gui.Svg(gui.SvgCfg{...}) renders an SVG file using go-gui's full SVG pipeline: CSS cascade, path tessellation, and GPU rendering. The pipeline is security-hardened (external entity loading and recursive <use> loops are disabled).

gui.Svg(gui.SvgCfg{
    Path:   "assets/icon.svg",
    Width:  48,
    Height: 48,
    Sizing: gui.FixedFixed,
})

For drawing SVG-like shapes procedurally at runtime, see DrawCanvas in Graphics.


Markdown

w.Markdown(gui.MarkdownCfg{...}) renders a Markdown string using the current theme's typography. Headings, emphasis, code spans, and lists are all supported.

w.Markdown(gui.MarkdownCfg{
    Text:   readmeContent,
    Sizing: gui.FillFit,
})

Note the method is on *gui.Window (w.Markdown) rather than a package-level function. This gives the widget access to the theme and text measurement services.


RTF

gui.RTF(gui.RtfCfg{...}) renders Rich Text Format content, useful when displaying content from external sources that produce RTF.

gui.RTF(gui.RtfCfg{
    Text:   rtfString,
    Sizing: gui.FillFit,
})

Badge

gui.Badge(gui.BadgeCfg{...}) renders a small count indicator typically overlaid on another widget (an icon or avatar).

gui.Badge(gui.BadgeCfg{
    Count: app.UnreadCount,
    Content: []gui.View{
        gui.Svg(gui.SvgCfg{Path: "assets/bell.svg", Width: 24, Height: 24}),
    },
})

The badge floats in the top-right corner of its Content children.


DrawCanvas

gui.DrawCanvas(gui.DrawCanvasCfg{...}) gives you a surface for custom procedural drawing: polylines, filled polygons, arcs, circles, and text. The canvas is rendered via the same GPU pipeline as the rest of the framework and can receive keyboard focus.

gui.DrawCanvas(gui.DrawCanvasCfg{
    ID:      "chart",
    IDFocus: 10,
    Width:   400,
    Height:  300,
    Sizing:  gui.FixedFixed,
    Draw: func(dc *gui.DrawContext) {
        dc.Polyline(gui.DrawPolylineCfg{
            Points:    []gui.Pt{{10, 10}, {100, 80}, {200, 30}},
            Color:     gui.RGBA(100, 180, 255, 255),
            Thickness: 2,
        })
    },
})

For a deeper treatment of canvas drawing, gradients, shaders, and visual effects see Graphics.

Clone this wiki locally