ratatui/examples
Josh McKinney 6ad4bd4cf2
docs(examples): Add color and modifiers examples (#345)
The intent of these examples is to show the available colors and
modifiers.

- added impl Display for Color

![colors](https://vhs.charm.sh/vhs-2ZCqYbTbXAaASncUeWkt1z.gif)
![modifiers](https://vhs.charm.sh/vhs-2ovGBz5l3tfRGdZ7FCw0am.gif)
2023-08-11 01:36:12 +00:00
..
demo fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
barchart.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
barchart.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
block.rs docs(examples): Update block example (#351) 2023-08-04 07:46:37 +00:00
block.tape docs(examples): Update block example (#351) 2023-08-04 07:46:37 +00:00
calendar.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
calendar.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
canvas.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
canvas.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
chart.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
chart.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
colors.rs docs(examples): Add color and modifiers examples (#345) 2023-08-11 01:36:12 +00:00
colors.tape docs(examples): Add color and modifiers examples (#345) 2023-08-11 01:36:12 +00:00
custom_widget.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
custom_widget.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
gauge.rs docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
gauge.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
hello_world.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
hello_world.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
inline.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
inline.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
layout.rs docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
layout.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
list.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
list.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
modifiers.rs docs(examples): Add color and modifiers examples (#345) 2023-08-11 01:36:12 +00:00
modifiers.tape docs(examples): Add color and modifiers examples (#345) 2023-08-11 01:36:12 +00:00
panic.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
panic.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
paragraph.rs docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
paragraph.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
popup.rs fix(prelude): remove widgets module from prelude (#317) 2023-07-16 09:11:59 +00:00
popup.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
README.md docs(examples): Add color and modifiers examples (#345) 2023-08-11 01:36:12 +00:00
scrollbar.rs feat(scrollbar)!: add optional track symbol (#360) 2023-08-03 15:42:54 +00:00
scrollbar.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
sparkline.rs docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
sparkline.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
table.rs docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
table.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
tabs.rs docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
tabs.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
user_input.rs docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00
user_input.tape docs(examples): Add examples readme with gifs (#303) 2023-07-24 19:05:37 +00:00

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

Barchart

Block (block.rs)

cargo run --example=block --features=crossterm

Block

Calendar (calendar.rs)

cargo run --example=calendar --features=crossterm widget-calendar

Calendar

Canvas (canvas.rs)

cargo run --example=canvas --features=crossterm

Canvas

Chart (chart.rs)

cargo run --example=chart --features=crossterm

Chart

Colors (colors.rs)

cargo run --example=colors --features=crossterm

Colors

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.

Custom 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

Gauge

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.

Hello World

Inline (inline.rs)

cargo run --example=inline --features=crossterm

Inline

Layout (layout.rs)

cargo run --example=layout --features=crossterm

Layout

List (list.rs)

cargo run --example=list --features=crossterm

List

Modifiers (modifiers.rs)

cargo run --example=modifiers --features=crossterm

Modifiers

Panic (panic.rs)

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

Panic

Paragraph (paragraph.rs)

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

Paragraph

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

Popup

Scrollbar (scrollbar.rs)

cargo run --example=scrollbar --features=crossterm

Scrollbar

Sparkline (sparkline.rs)

cargo run --example=sparkline --features=crossterm

Sparkline

Table (table.rs)

cargo run --example=table --features=crossterm

Table

Tabs (tabs.rs)

cargo run --example=tabs --features=crossterm

Tabs

User Input (user_input.rs)

cargo run --example=user_input --features=crossterm

User Input