ratatui/examples
Josh McKinney 8f56fabcdd
feat: accept Color and Modifier for all Styles (#720)
* feat: accept Color and Modifier for all Styles

All style related methods now accept `S: Into<Style>` instead of
`Style`.
`Color` and `Modifier` implement `Into<Style>` so this is allows for
more ergonomic usage. E.g.:

```rust
Line::styled("hello", Style::new().red());
Line::styled("world", Style::new().bold());

// can now be simplified to

Line::styled("hello", Color::Red);
Line::styled("world", Modifier::BOLD);
```

Fixes https://github.com/ratatui-org/ratatui/issues/694

BREAKING CHANGE: All style related methods now accept `S: Into<Style>`
instead of `Style`. This means that if you are already passing an
ambiguous type that implements `Into<Style>` you will need to remove
the `.into()` call.

`Block` style methods can no longer be called from a const context as
trait functions cannot (yet) be const.

* feat: add tuple conversions to Style

Adds conversions for various Color and Modifier combinations

* chore: add unit tests
2023-12-31 10:01:06 -08:00
..
demo refactor(examples): add vim binding (#688) 2023-12-14 19:11:48 -08:00
demo2 fix(table)!: Add widths parameter to new() (#664) 2023-12-04 15:22:52 -08:00
barchart.rs chore(examples): refactor some examples (#578) 2023-10-20 21:31:52 +02:00
barchart.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
block.rs chore: simplify constraints (#556) 2023-10-03 16:50:14 -07:00
block.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
calendar.rs feat: accept Color and Modifier for all Styles (#720) 2023-12-31 10:01:06 -08:00
calendar.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
canvas.rs refactor(examples): add vim binding (#688) 2023-12-14 19:11:48 -08:00
canvas.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
chart.rs docs(examples): refactor chart example to showcase scatter (#703) 2023-12-22 16:57:26 -08:00
chart.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
colors.rs chore: simplify constraints (#556) 2023-10-03 16:50:14 -07:00
colors.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
colors_rgb.rs docs(examples): add animation and FPS counter to colors_rgb (#583) 2023-12-17 01:34:59 -08:00
colors_rgb.tape docs(examples): add animation and FPS counter to colors_rgb (#583) 2023-12-17 01:34:59 -08:00
custom_widget.rs refactor(examples): add vim binding (#688) 2023-12-14 19:11:48 -08:00
custom_widget.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
demo.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
demo2-social.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
demo2.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
docsrs.rs chore: simplify constraints (#556) 2023-10-03 16:50:14 -07:00
docsrs.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
gauge.rs fix(gauge): fix gauge widget colors (#572) 2023-10-19 04:29:53 -07:00
gauge.tape fix(gauge): fix gauge widget colors (#572) 2023-10-19 04:29:53 -07:00
generate.bash docs(examples): update examples readme (#576) 2023-10-20 21:41:36 +02:00
hello_world.rs feat(frame)!: Remove generic Backend parameter (#530) 2023-09-25 22:30:36 -07:00
hello_world.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
inline.rs chore(examples): refactor some examples (#578) 2023-10-20 21:31:52 +02:00
inline.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
layout.rs chore: simplify constraints (#556) 2023-10-03 16:50:14 -07:00
layout.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
list.rs refactor(examples): add vim binding (#688) 2023-12-14 19:11:48 -08:00
list.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
modifiers.rs chore: simplify constraints (#556) 2023-10-03 16:50:14 -07:00
modifiers.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
panic.rs feat(frame)!: Remove generic Backend parameter (#530) 2023-09-25 22:30:36 -07:00
panic.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
paragraph.rs chore(examples): refactor some examples (#578) 2023-10-20 21:31:52 +02:00
paragraph.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
popup.rs chore: simplify constraints (#556) 2023-10-03 16:50:14 -07:00
popup.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
ratatui-logo.rs docs(examples): Add example of half block rendering (#687) 2023-12-13 18:25:21 -08:00
ratatui-logo.tape docs(examples): Add example of half block rendering (#687) 2023-12-13 18:25:21 -08:00
README.md docs(examples): add animation and FPS counter to colors_rgb (#583) 2023-12-17 01:34:59 -08:00
scrollbar.rs chore(examples): refactor some examples (#578) 2023-10-20 21:31:52 +02:00
scrollbar.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
sparkline.rs chore(examples): refactor some examples (#578) 2023-10-20 21:31:52 +02:00
sparkline.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
table.rs feat(table): Add Table::footer and Row::top_margin methods (#722) 2023-12-29 07:44:41 -08:00
table.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
tabs.rs refactor(examples): add vim binding (#688) 2023-12-14 19:11:48 -08:00
tabs.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00
user_input.rs chore: simplify constraints (#556) 2023-10-03 16:50:14 -07:00
user_input.tape docs(examples): udpate theme to Aardvark Blue (#574) 2023-10-18 13:35:51 +02:00

Examples

These gifs were created using VHS. Each example has a corresponding .tape file that holds instructions for how to generate the images. Note that the images themselves are stored in a separate git branch to avoid bloating the main repository.

Demo2

This is the demo example from the main README and crate page. Source: demo2.

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

Demo2

Demo

This is the previous demo example from the main README. It is available for each of the backends. Source: demo.rs.

cargo run --example=demo --features=crossterm
cargo run --example=demo --no-default-features --features=termion
cargo run --example=demo --no-default-features --features=termwiz

Demo

Hello World

This is a pretty boring example, but it contains some good documentation on writing tui apps. Source: hello_world.rs.

cargo run --example=hello_world --features=crossterm

Hello World

Barchart

Demonstrates the BarChart widget. Source: barchart.rs.

cargo run --example=barchart --features=crossterm

Barchart

Block

Demonstrates the Block widget. Source: block.rs.

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

Block

Calendar

Demonstrates the Calendar widget. Source: calendar.rs.

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

Calendar

Canvas

Demonstrates the Canvas widget and related shapes in the canvas module. Source: canvas.rs.

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

Canvas

Chart

Demonstrates the Chart widget. Source: chart.rs.

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

Chart

Colors

Demonstrates the available Color options. These can be used in any style field. Source: colors.rs.

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

Colors

Colors (RGB)

Demonstrates the available RGB Color options. These can be used in any style field. Source: colors_rgb.rs. Uses a half block technique to render two square-ish pixels in the space of a single rectangular terminal cell.

cargo run --example=colors_rgb --features=crossterm

Note: VHs renders full screen animations poorly, so this is a screen capture rather than the output of the VHS tape.

https://github.com/ratatui-org/ratatui/assets/381361/485e775a-e0b5-4133-899b-1e8aeb56e774

Custom Widget

Demonstrates how to implement the Widget trait. Also shows mouse interaction. Source: custom_widget.rs.

cargo run --example=custom_widget --features=crossterm

Custom Widget

Gauge

Demonstrates the Gauge widget. Source: gauge.rs.

cargo run --example=gauge --features=crossterm

Gauge

Inline

Demonstrates how to use the Inline Viewport mode for ratatui apps. Source: inline.rs.

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

Inline

Layout

Demonstrates the Layout and interaction between each constraint. Source: layout.rs.

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

Layout

List

Demonstrates the List widget. Source: list.rs.

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

List

Modifiers

Demonstrates the style Modifiers. Source: modifiers.rs.

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

Modifiers

Panic

Demonstrates how to handle panics by ensuring that panic messages are written correctly to the screen. Source: panic.rs.

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

Panic

Paragraph

Demonstrates the Paragraph widget. Source: paragraph.rs

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

Paragraph

Popup

Demonstrates how to render a widget over the top of previously rendered widgets using the Clear widget. Source: popup.rs.

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

Popup

A fun example of using half blocks to render graphics Source: ratatui-logo.rs.

cargo run --example=ratatui-logo --features=crossterm

Ratatui Logo

Scrollbar

Demonstrates the Scrollbar widget. Source: scrollbar.rs.

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

Scrollbar

Sparkline

Demonstrates the Sparkline widget. Source: sparkline.rs.

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

Sparkline

Table

Demonstrates the Table widget. Source: table.rs.

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

Table

Tabs

Demonstrates the Tabs widget. Source: tabs.rs.

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

Tabs

User Input

Demonstrates one approach to accepting user input. Source user_input.rs.

[!NOTE] Consider using tui-textarea or tui-input crates for more functional text entry UIs.

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

User Input