Skip to content

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 joined by an automatic divider:

csharp
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")
        ]).Divider(" │ ")
    ]))
    .Build();

await terminal.RunAsync();

Spacer ​

Use Spacer() to push sections apart. The spacer expands to fill available space:

csharp
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.Divider(" │ "),
            s.Section("UTF-8")
        ])
    ]))
    .Build();

await terminal.RunAsync();

Dividers ​

Control how sections are visually divided. A divider is a literal character (or string) drawn between two adjacent sections — distinct from a spacer, which is the flexible gap above.

Default Divider ​

Use .Divider() on the InfoBarWidget to automatically insert a divider between consecutive sections:

csharp

Explicit Dividers ​

Add dividers manually for fine-grained control:

csharp
ctx.InfoBar(s => [
    s.Section("Mode"),
    s.Divider(" │ "),  // Explicit divider
    s.Section("File"),
    // No divider here
    s.Spacer(),
    s.Section("Ready")
])

Widget Content ​

Sections can contain any widget, not just text. This enables rich status displays:

csharp
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();

Width Control ​

Control how sections size themselves:

csharp

Width Options ​

MethodDescription
.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:

csharp
s.Section("Left").FixedWidth(20).AlignLeft()    // Default
s.Section("Center").FixedWidth(20).AlignCenter()
s.Section("Right").FixedWidth(20).AlignRight()

Per-Section Theming ​

Apply custom colors to individual sections using .Theme():

csharp

Color Inversion ​

By default, InfoBar inverts foreground and background colors to create visual distinction. Disable this with .InvertColors(false):

csharp
ctx.InfoBar(s => [
    s.Section("Normal colors")
]).InvertColors(false)
  • Text - For simple text display
  • Spinner - Animated activity indicators for InfoBar sections
  • ThemePanel - For broader theme customization

Released under the MIT License.