
Previously the layout used the floor of the calculated start and width as the value to use for the split Rects. This resulted in gaps between the split rects. This change modifies the layout to round to the nearest column instead of taking the floor of the start and width. This results in the start and end of each rect being rounded the same way and being strictly adjacent without gaps. Because there is a required constraint that ensures that the last end is equal to the area end, there is no longer the need to fixup the last item width when the fill (as e.g. width = x.99 now rounds to x+1 not x). The colors example has been updated to use Ratio(1, 8) instead of Percentage(13), as this now renders without gaps for all possible sizes, whereas previously it would have left odd gaps between columns.
Examples
These gifs were created using Charm VHS.
VHS has a problem rendering some background color transitions, which shows up in several examples below. See https://github.com/charmbracelet/vhs/issues/344 for more info. These problems don't occur in a terminal.
Demo (demo.rs)
This is the demo example from the main README. It is available for each of the backends.
cargo run --example=demo --features=crossterm
cargo run --example=demo --no-default-features --features=termion
cargo run --example=demo --no-default-features --features=termwiz
Barchart (barchart.rs
cargo run --example=barchart --features=crossterm
Block (block.rs)
cargo run --example=block --features=crossterm
Calendar (calendar.rs)
cargo run --example=calendar --features=crossterm widget-calendar
Canvas (canvas.rs)
cargo run --example=canvas --features=crossterm
Chart (chart.rs)
cargo run --example=chart --features=crossterm
Colors (colors.rs)
cargo run --example=colors --features=crossterm
Custom Widget (custom_widget.rs)
cargo run --example=custom_widget --features=crossterm
This is not a particularly exciting example visually, but it demonstrates how to implement your own widget.
Gauge (gauge.rs)
Please note: the background renders poorly when we generate this example using VHS. This problem doesn't generally happen during normal rendering in a terminal. See https://github.com/charmbracelet/vhs/issues/344 for more details
cargo run --example=gauge --features=crossterm
Hello World (hello_world.rs)
cargo run --example=hello_world --features=crossterm
This is a pretty boring example, but it contains some good comments of documentation on some of the standard approaches to writing tui apps.
Inline (inline.rs)
cargo run --example=inline --features=crossterm
Layout (layout.rs)
cargo run --example=layout --features=crossterm
List (list.rs)
cargo run --example=list --features=crossterm
Modifiers (modifiers.rs)
cargo run --example=modifiers --features=crossterm
Panic (panic.rs)
cargo run --example=panic --features=crossterm
Paragraph (paragraph.rs)
cargo run --example=paragraph --features=crossterm
Popup (popup.rs)
cargo run --example=popup --features=crossterm
Please note: the background renders poorly when we generate this example using VHS. This problem doesn't generally happen during normal rendering in a terminal. See https://github.com/charmbracelet/vhs/issues/344 for more details
Scrollbar (scrollbar.rs)
cargo run --example=scrollbar --features=crossterm
Sparkline (sparkline.rs)
cargo run --example=sparkline --features=crossterm
Table (table.rs)
cargo run --example=table --features=crossterm
Tabs (tabs.rs)
cargo run --example=tabs --features=crossterm
User Input (user_input.rs)
cargo run --example=user_input --features=crossterm