mirror of https://github.com/ratatui/ratatui.git synced 2025-09-28 05:21:23 +00:00

docs(examples): Add examples readme with gifs (#303 )

This commit adds a readme to the examples directory with gifs of each
example. This should make it easier to see what each example does
without having to run it.

I modified the examples to fit better in the gifs. Mostly this was just
removing the margins, but for the block example I cleaned up the code a
bit to make it more readable and changed it so the background bug is not
triggered.

For the table example, the combination of Min, Length, and Percent
constraints was causing the table to panic when the terminal was too
small. I changed the example to use the Max constraint instead of the
Length constraint.

The layout example now shows information about how the layout is
constrained on each block (which is now a paragraph with a block).

2023-07-24 19:05:37 +00:00

5.1 KiB

Raw Blame History

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.

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

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

Panic (panic.rs)

cargo run --example=panic --features=crossterm

Paragraph (paragraph.rs)

cargo run --example=paragraph --features=crossterm

cargo run --example=popup --features=crossterm

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

5.1 KiB Raw Blame History