InfoBar
A horizontal status bar widget for displaying contextual information at the edge of your application. InfoBar is commonly used to show mode indicators, file status, cursor position, and other metadata.
Basic Usage
Create an InfoBar with sections separated by a default separator:
using Hex1b;
await using var terminal = Hex1bTerminal.CreateBuilder()
.WithHex1bApp((app, options) => ctx => ctx.VStack(v => [
v.Border(b => [
b.Text("Main content area"),
b.Text(""),
b.Text("The status bar sits at the bottom of the window")
], title: "Application").FillHeight(),
v.InfoBar(s => [
s.Section("NORMAL"),
s.Section("main.cs"),
s.Section("Ln 42, Col 8")
]).WithDefaultSeparator(" │ ")
]))
.Build();
await terminal.RunAsync();dotnet runSpacer
Use Spacer() to push sections apart. The spacer expands to fill available space:
using Hex1b;
await using var terminal = Hex1bTerminal.CreateBuilder()
.WithHex1bApp((app, options) => ctx => ctx.VStack(v => [
v.Border(b => [
b.Text("Content with a flexible status bar")
], title: "Spacer Demo").FillHeight(),
v.InfoBar(s => [
s.Section("Mode: INSERT"),
s.Spacer(),
s.Section("100%"),
s.Separator(" │ "),
s.Section("UTF-8")
])
]))
.Build();
await terminal.RunAsync();dotnet runSeparators
Control how sections are visually separated:
Default Separator
Use .WithDefaultSeparator() to automatically insert separators between consecutive sections:
Explicit Separators
Add separators manually for fine-grained control:
ctx.InfoBar(s => [
s.Section("Mode"),
s.Separator(" │ "), // Explicit separator
s.Section("File"),
// No separator here
s.Spacer(),
s.Section("Ready")
])2
3
4
5
6
7
8
Widget Content
Sections can contain any widget, not just text. This enables rich status displays:
using Hex1b;
using Hex1b.Widgets;
await using var terminal = Hex1bTerminal.CreateBuilder()
.WithHex1bApp((app, options) => ctx => ctx.VStack(v => [
v.Border(b => [
b.Text("Background operation in progress...")
], title: "Activity Indicator").FillHeight(),
v.InfoBar(s => [
s.Section(x => x.HStack(h => [
h.Spinner(SpinnerStyle.Dots),
h.Text(" Saving...")
])),
s.Spacer(),
s.Section("Ready")
])
]))
.Build();
await terminal.RunAsync();dotnet runWidth Control
Control how sections size themselves:
Width Options
| Method | Description |
|---|---|
.ContentWidth() | Size to fit content (default) |
.FixedWidth(n) | Fixed width in columns |
.FillWidth() | Expand to fill available space |
.FillWidth(weight) | Proportional fill with weight |
Alignment
Within fixed-width sections, control text alignment:
s.Section("Left").FixedWidth(20).AlignLeft() // Default
s.Section("Center").FixedWidth(20).AlignCenter()
s.Section("Right").FixedWidth(20).AlignRight()2
3
Per-Section Theming
Apply custom colors to individual sections using .Theme():
Color Inversion
By default, InfoBar inverts foreground and background colors to create visual distinction. Disable this with .InvertColors(false):
ctx.InfoBar(s => [
s.Section("Normal colors")
]).InvertColors(false)2
3
Related Widgets
- Text - For simple text display
- Spinner - Animated activity indicators for InfoBar sections
- ThemePanel - For broader theme customization