Displaying text

These widgets show text and small images that the user reads but does not edit. For editable text, see Text input.

Which one to use

Label

title := widget.NewLabelWithStyle("Release notes", bellui.TextAlignLeading,
	bellui.TextStyle{Bold: true})
title.SizeName = theme.SizeNameHeadingText

body := widget.NewLabel("Long text wraps at word boundaries when the label has a fixed width.")
body.Wrapping = bellui.TextWrapWord

path := widget.NewLabel("/home/user/projects/a/very/long/path/to/a/file.txt")
path.Truncation = bellui.TextTruncateEllipsis
path.ShowTooltipWhenTruncated = true

warning := widget.NewLabel("Disk almost full")
warning.Importance = widget.WarningImportance

id := widget.NewLabel("Order ID: 7F3A-22C1")
id.Selectable = true

Label shows text in a single style. SetText changes it and is safe to call from any goroutine.

• TextStyle sets bold, italic, monospace and so on, and Alignment aligns the text. NewLabelWithStyle sets both at once.
• SizeName picks a text size from the theme, such as theme.SizeNameHeadingText.
• Wrapping wraps long text (bellui.TextWrapWord breaks between words). Truncation cuts it off instead; bellui.TextTruncateEllipsis adds “…”. With truncation on, ShowTooltipWhenTruncated shows the full text on hover.
• Importance colours the text: LowImportance uses the disabled colour, HighImportance the primary colour, and DangerImportance, WarningImportance and SuccessImportance the matching theme colours.
• Selectable lets the user select and copy the text.

A wrapping or truncating label asks for almost no width, so give it room with a layout. IntrinsicSize() tells you the size the text would need on one line. NewLabelWithData connects the text to a binding.String.

Hyperlink

u, _ := url.Parse("https://bellui.com")
site := widget.NewHyperlink("bellui.com", u)

help := widget.NewHyperlink("Show help", nil)
help.OnTapped = func() { body.SetText("Help was tapped.") }

Hyperlink draws text in the primary colour and opens URL in the default browser when tapped. Set OnTapped to run your own function instead; then the URL may be nil. ColorName picks another theme colour, and SetURLFromString sets the URL from a string. Space activates a focused link.

RichText

RichText shows a list of segments, each with its own style. Text segments are TextSegment values with a RichTextStyle. The package has ready-made styles: RichTextStyleInline, RichTextStyleParagraph, RichTextStyleStrong, RichTextStyleEmphasis, RichTextStyleHeading, RichTextStyleSubHeading, RichTextStyleBlockquote, RichTextStyleCodeInline and RichTextStyleCodeBlock.

status := widget.NewRichText(
	&widget.TextSegment{Text: "Build ", Style: widget.RichTextStyleInline},
	&widget.TextSegment{Text: "passed", Style: widget.RichTextStyleStrong},
	&widget.TextSegment{Text: " in 42 s. ", Style: widget.RichTextStyleInline},
	&widget.TextSegment{Text: "go test ./...", Style: widget.RichTextStyleCodeInline},
)
status.Wrapping = bellui.TextWrapWord

Inline segments flow on together in one paragraph. A segment whose style is not inline starts its own block. Other segment types add links (HyperlinkSegment), images (ImageSegment), lists (ListSegment), tables (TableSegment), separators (SeparatorSegment) and syntax-highlighted code (CodeSegment).

After you change Segments, call Refresh(). Set Wrapping for text that should wrap, and Selectable to let the user copy it.

Markdown

md := widget.NewRichTextFromMarkdown(notes)
md.Wrapping = bellui.TextWrapWord

NewRichTextFromMarkdown parses Markdown into segments. Headings, emphasis, lists, links, code, block quotes and images work, and so do tables, strikethrough and task lists. A fenced code block that names its language is syntax-highlighted for Go, JSON, YAML, Starlark and Protocol Buffers. ParseMarkdown replaces the content of an existing RichText and AppendMarkdown adds to it.

HTML

html := widget.NewRichTextFromHTML(
	`<p>Read the <a href="https://bellui.com">guide</a> or <code>go doc</code>.</p>` +
		`<ul><li><b>Bold</b> item</li><li><i>Italic</i> item</li></ul>`)

NewRichTextFromHTML reads a subset of HTML: paragraphs, headings, block quotes, pre, lists, tables, b/strong, i/em, u, s/del, code, links, images, br and hr. It is for formatted text, not web pages: there is no CSS layout and no scripting. ParseHTML and AppendHTML work like their Markdown twins.

TextGrid

TextGrid is a grid of monospaced cells, one character each, for log viewers, code previews and terminals.

log := widget.NewTextGridFromString("12:00:01 starting\n12:00:02 listening on :8080")
log.ShowLineNumbers = true

log.Append("12:00:05 ERROR connection refused")
red := &widget.CustomTextGridStyle{FGColor: color.NRGBA{R: 0xd0, A: 0xff}}
log.SetRowStyle(2, red)
log.ScrollToBottom()

• SetText replaces everything and Append adds lines at the end. Text() returns the content without styles.
• SetRune, SetCell and SetRow change single cells or rows.
• SetStyle, SetRowStyle and SetStyleRange colour cells. A style is any TextGridStyle; CustomTextGridStyle takes a text colour, a background colour and a TextStyle.
• ShowLineNumbers and ShowWhitespace add a line-number column and visible whitespace. ScrollToBottom() follows new output.

Icon, FileIcon and Separator

row := container.NewHBox(widget.NewIcon(theme.InfoIcon()), widget.NewLabel("Saved to cloud"))

Icon shows a resource, usually one of the theme icons such as theme.InfoIcon(), and recolours it to match the theme. SetResource swaps it. FileIcon takes a file URI and shows an icon labelled with the file’s type. Separator is a thin dividing line in a theme colour.

AnimatedGif plays a GIF from a URI (NewAnimatedGif) or a resource (NewAnimatedGifFromResource). Call Start() to play and Stop() to pause on the current frame. A GIF has no size of its own on screen, so call SetMinSize or let the layout size it.