Skip to main content

Widget catalogue

core.term.widget ships twenty composable widgets. Each implements Widget (stateless) or StatefulWidget (with an associated State type). Every widget accepts a Style and an optional Block wrapper.

Containers & framing​

Block​

Border + title + padding, the universal framing widget.

Block.new()
    .title(" Logs ")
    .borders(Borders.ALL)
    .border_type(BorderType.Rounded)
    .style(Style.new().fg(Color.Cyan))

Split​

Two panes with an interactive divider (horizontal or vertical).

let (left, div, right) = TermSplit.horizontal().ratio(0.3).layout(area, &state);
TermSplit.horizontal().render_divider(div, buf, &state);

Text​

Paragraph​

Styled multi-line text with NoWrap, CharWrap, or WordWrap.

Paragraph.new()
    .text([Line.raw("First line"), Line.styled("Second", Style.new().bold())])
    .wrap(Wrap.WordWrap)          // NoWrap | WordWrap | CharWrap
    .alignment(Alignment.Center)

Lists & tables​

SelectableList​

Scrollable single-select list.

SelectableList.new(&items)
    .block(Block.new().title("Files"))
    .highlight_style(Style.new().reversed())
    .highlight_symbol(&"> ")
    .render(area, f.buffer, &mut state);

Table​

Structured rows with per-column LayoutConstraint widths. The widths are a CONSTRUCTOR argument — there is no .widths(…) builder — and the row type is TableRow.

Table.new(rows, [LayoutConstraint.Percentage(40),
                 LayoutConstraint.Percentage(60)])
    .header(TableRow.new(["Name", "Value"]))
    .highlight_spacing(HighlightSpacing.WhenSelected)
    .render(area, f.buffer, &mut state);

Tree<T>​

Nested items with expand/collapse, connectors, and path-based selection.

Tree.new(items)
    .highlight_style(Style.new().bg(Color.Blue).fg(Color.White))
    .highlight_symbol(&"> ")
    .render(area, f.buffer, &mut state);

Input​

TextInput​

Single-line editor with selection, undo/redo, clipboard, grapheme cursor, Emacs bindings.

TextInput.new()
    .block(Block.new().title("Search"))
    .placeholder("type here…")
    .render(area, f.buffer, &mut state);

TextArea​

Multi-line editor with line-array storage, line numbers, tab expansion.

TextArea.new()
    .line_numbers(true)
    .wrap(WrapMode.NoWrap)
    .render(area, f.buffer, &mut state);

Select widget with optional incremental search.

Dropdown.new(items, |x| x.name.clone())
    .searchable(true)
    .max_visible(8)
    .render(area, f.buffer, &mut state);

Vertical menu with submenus, shortcuts, disabled items, separators.

Menu.new([
    MenuItem.new("New").shortcut("Ctrl+N"),
    MenuItem.new("Open").shortcut("Ctrl+O"),
    MenuItem.separator(),
    MenuItem.new("Export").submenu([
        MenuItem.new("JSON"),
        MenuItem.new("CSV"),
    ]),
])

Dialog​

Modal window with buttons.

Dialog.new("Save changes?")
    .buttons([DialogButton.new("Save"), DialogButton.new("Discard"), DialogButton.new("Cancel")])

Progress & feedback​

Gauge​

Smooth progress bar (8 sub-cell levels ▏▎▍▌▋▊▉█).

TermGauge.new().percent(state.progress).style(Style.new().fg(Color.Green))

Spinner​

Frame-based animation (dots, line, moon, earth, arrows, blocks).

Spinner.dots().label_text("Loading…").render(area, f.buffer, &mut state);

Notification​

Toast with level (Info, Warning, Error, Success).

Notification.success("Saved!").title("IO").width(40).render(area, buf);

Scrollbar​

Thin scroll indicator (vertical or horizontal).

// Orientation picks the CONSTRUCTOR; there is no `Scrollbar.new`, and
// `ScrollbarOrientation` has two variants — Vertical and Horizontal.
Scrollbar.vertical()
    .render(area, f.buffer, &mut state);

Charts​

Sparkline​

Compact bar chart using 8-level Unicode blocks.

Sparkline.new(data).bar_style(Style.new().fg(Color.Yellow))

BarChart​

Grouped bars with per-bar labels and values, vertical or horizontal.

BarChart.new(groups).bar_width(4).group_gap(2).direction(Direction.Vertical)

Canvas​

Pixel canvas with Braille (2×4), half-block (1×2), or block (1×1) modes.

Canvas.new()
    .x_bounds(0.0, 100.0)
    .y_bounds(0.0, 100.0)
    .marker(Marker.Braille)
    .paint(Heap.new(LineShape.new(0.0, 0.0, 100.0, 100.0, Color.Red)))

Tabs​

Single-row tab bar with dividers.

Tabs.new(["Overview", "Metrics", "Logs"]).select(1).divider(" | ")

Every widget is documented in depth under reference/ with the full API and at least one screenshot-style code example. Consult the individual pages for caveats (wide-grapheme handling, edge cases in resize, etc.) before shipping to production.