Cyclic0007/ratatui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: stylization shorthands (#283)

Browse Source
This commit is contained in:
Samy Rahmani
2023-07-01 05:14:16 -04:00
committed by GitHub
parent 83d3ec73e7
commit 2f4413be6e
15 changed files with 455 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
examples/block.rs
View File

@@ -8,8 +8,7 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Alignment, Constraint, Direction, Layout},
style::{Color, Modifier, Style},
text::Span,
style::{Color, Style, Stylize},
widgets::{block::title::Title, Block, BorderType, Borders, Padding, Paragraph},
Frame, Terminal,
};
@@ -80,24 +79,13 @@ fn ui<B: Backend>(f: &mut Frame<B>) {
// Top left inner block with green background
let block = Block::default()
.title(vec![
Span::styled("With", Style::default().fg(Color::Yellow)),
Span::from(" background"),
])
.style(Style::default().bg(Color::Green));
.title(vec!["With".yellow(), " background".into()])
.on_green();
f.render_widget(block, top_chunks[0]);
// Top right inner block with styled title aligned to the right
let block = Block::default().title(
Title::from(Span::styled(
"Styled title",
Style::default()
.fg(Color::White)
.bg(Color::Red)
.add_modifier(Modifier::BOLD),
))
.alignment(Alignment::Right),
);
let block = Block::default()
.title(Title::from("Styled title".white().on_red().bold()).alignment(Alignment::Right));
f.render_widget(block, top_chunks[1]);
// Bottom two inner blocks

9
examples/canvas.rs
View File

@@ -12,9 +12,8 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Constraint, Direction, Layout, Rect},
style::{Color, Style},
style::{Color, Stylize},
symbols::Marker,
text::Span,
widgets::{
canvas::{Canvas, Map, MapResolution, Rectangle},
Block, Borders,
@@ -177,11 +176,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
color: Color::White,
resolution: MapResolution::High,
});
ctx.print(
app.x,
-app.y,
Span::styled("You are here", Style::default().fg(Color::Yellow)),
);
ctx.print(app.x, -app.y, "You are here".yellow());
})
.x_bounds([-180.0, 180.0])
.y_bounds([-90.0, 90.0]);

53
examples/chart.rs
View File

@@ -12,7 +12,7 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Constraint, Direction, Layout},
style::{Color, Modifier, Style},
style::{Color, Modifier, Style, Stylize},
symbols,
text::Span,
widgets::{Axis, Block, Borders, Chart, Dataset, GraphType},
@@ -190,12 +190,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
let chart = Chart::new(datasets)
.block(
Block::default()
.title(Span::styled(
"Chart 1",
Style::default()
.fg(Color::Cyan)
.add_modifier(Modifier::BOLD),
))
.title("Chart 1".cyan().bold())
.borders(Borders::ALL),
)
.x_axis(
@@ -209,11 +204,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
Axis::default()
.title("Y Axis")
.style(Style::default().fg(Color::Gray))
.labels(vec![
Span::styled("-20", Style::default().add_modifier(Modifier::BOLD)),
Span::raw("0"),
Span::styled("20", Style::default().add_modifier(Modifier::BOLD)),
])
.labels(vec!["-20".bold(), "0".into(), "20".bold()])
.bounds([-20.0, 20.0]),
);
f.render_widget(chart, chunks[0]);
@@ -227,12 +218,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
let chart = Chart::new(datasets)
.block(
Block::default()
.title(Span::styled(
"Chart 2",
Style::default()
.fg(Color::Cyan)
.add_modifier(Modifier::BOLD),
))
.title("Chart 2".cyan().bold())
.borders(Borders::ALL),
)
.x_axis(
@@ -240,22 +226,14 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
.title("X Axis")
.style(Style::default().fg(Color::Gray))
.bounds([0.0, 5.0])
.labels(vec![
Span::styled("0", Style::default().add_modifier(Modifier::BOLD)),
Span::raw("2.5"),
Span::styled("5.0", Style::default().add_modifier(Modifier::BOLD)),
]),
.labels(vec!["0".bold(), "2.5".into(), "5.0".bold()]),
)
.y_axis(
Axis::default()
.title("Y Axis")
.style(Style::default().fg(Color::Gray))
.bounds([0.0, 5.0])
.labels(vec![
Span::styled("0", Style::default().add_modifier(Modifier::BOLD)),
Span::raw("2.5"),
Span::styled("5.0", Style::default().add_modifier(Modifier::BOLD)),
]),
.labels(vec!["0".bold(), "2.5".into(), "5.0".bold()]),
);
f.render_widget(chart, chunks[1]);
@@ -268,12 +246,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
let chart = Chart::new(datasets)
.block(
Block::default()
.title(Span::styled(
"Chart 3",
Style::default()
.fg(Color::Cyan)
.add_modifier(Modifier::BOLD),
))
.title("Chart 3".cyan().bold())
.borders(Borders::ALL),
)
.x_axis(
@@ -281,22 +254,14 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
.title("X Axis")
.style(Style::default().fg(Color::Gray))
.bounds([0.0, 50.0])
.labels(vec![
Span::styled("0", Style::default().add_modifier(Modifier::BOLD)),
Span::raw("25"),
Span::styled("50", Style::default().add_modifier(Modifier::BOLD)),
]),
.labels(vec!["0".bold(), "25".into(), "50".bold()]),
)
.y_axis(
Axis::default()
.title("Y Axis")
.style(Style::default().fg(Color::Gray))
.bounds([0.0, 5.0])
.labels(vec![
Span::styled("0", Style::default().add_modifier(Modifier::BOLD)),
Span::raw("2.5"),
Span::styled("5", Style::default().add_modifier(Modifier::BOLD)),
]),
.labels(vec!["0".bold(), "2.5".into(), "5".bold()]),
);
f.render_widget(chart, chunks[2]);
}

20
examples/list.rs
View File

@@ -12,7 +12,7 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Constraint, Corner, Direction, Layout},
style::{Color, Modifier, Style},
style::{Color, Modifier, Style, Stylize},
text::{Line, Span},
widgets::{Block, Borders, List, ListItem, ListState},
Frame, Terminal,
@@ -220,10 +220,11 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
.map(|i| {
let mut lines = vec![Line::from(i.0)];
for _ in 0..i.1 {
lines.push(Line::from(Span::styled(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
Style::default().add_modifier(Modifier::ITALIC),
)));
lines.push(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
.italic()
.into(),
);
}
ListItem::new(lines).style(Style::default().fg(Color::Black).bg(Color::White))
})
@@ -260,14 +261,11 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
// Add a example datetime and apply proper spacing between them
let header = Line::from(vec![
Span::styled(format!("{level:<9}"), s),
Span::raw(" "),
Span::styled(
"2020-01-01 10:00:00",
Style::default().add_modifier(Modifier::ITALIC),
),
" ".into(),
"2020-01-01 10:00:00".italic(),
]);
// The event gets its own line
let log = Line::from(vec![Span::raw(event)]);
let log = Line::from(vec![event.into()]);
// Here several things happen:
// 1. Add a `---` spacing line above the final list entry

30
examples/paragraph.rs
View File

@@ -12,7 +12,7 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Alignment, Constraint, Direction, Layout},
style::{Color, Modifier, Style},
style::{Color, Modifier, Style, Stylize},
text::{Line, Masked, Span},
widgets::{Block, Borders, Paragraph, Wrap},
Frame, Terminal,
@@ -96,7 +96,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
let mut long_line = s.repeat(usize::from(size.width) / s.len() + 4);
long_line.push('\n');
let block = Block::default().style(Style::default().fg(Color::Black));
let block = Block::default().black();
f.render_widget(block, size);
let chunks = Layout::default()
@@ -115,27 +115,13 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
let text = vec![
Line::from("This is a line "),
Line::from(Span::styled(
"This is a line ",
Style::default().fg(Color::Red),
)),
Line::from(Span::styled(
"This is a line",
Style::default().bg(Color::Blue),
)),
Line::from(Span::styled(
"This is a longer line",
Style::default().add_modifier(Modifier::CROSSED_OUT),
)),
Line::from(Span::styled(&long_line, Style::default().bg(Color::Green))),
Line::from(Span::styled(
"This is a line",
Style::default()
.fg(Color::Green)
.add_modifier(Modifier::ITALIC),
)),
Line::from("This is a line ".red()),
Line::from("This is a line".on_blue()),
Line::from("This is a longer line".crossed_out()),
Line::from(long_line.on_green()),
Line::from("This is a line".green().italic()),
Line::from(vec![
Span::raw("Masked text: "),
"Masked text: ".into(),
Span::styled(
Masked::new("password", '*'),
Style::default().fg(Color::Red),

14
examples/popup.rs
View File

@@ -8,8 +8,7 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Alignment, Constraint, Direction, Layout, Rect},
style::{Color, Modifier, Style},
text::Span,
style::Stylize,
widgets::{Block, Borders, Clear, Paragraph, Wrap},
Frame, Terminal,
};
@@ -80,18 +79,15 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
} else {
"Press p to show the popup"
};
let paragraph = Paragraph::new(Span::styled(
text,
Style::default().add_modifier(Modifier::SLOW_BLINK),
))
.alignment(Alignment::Center)
.wrap(Wrap { trim: true });
let paragraph = Paragraph::new(text.slow_blink())
.alignment(Alignment::Center)
.wrap(Wrap { trim: true });
f.render_widget(paragraph, chunks[0]);
let block = Block::default()
.title("Content")
.borders(Borders::ALL)
.style(Style::default().bg(Color::Blue));
.on_blue();
f.render_widget(block, chunks[1]);
if app.show_popup {

52
examples/scrollbar.rs
View File

@@ -12,7 +12,7 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Alignment, Constraint, Direction, Layout, Margin},
style::{Color, Modifier, Style},
style::{Color, Modifier, Style, Stylize},
text::{Line, Masked, Span},
widgets::{
scrollbar, Block, Borders, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState,
@@ -115,7 +115,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
let mut long_line = s.repeat(usize::from(size.width) / s.len() + 4);
long_line.push('\n');
let block = Block::default().style(Style::default().fg(Color::Black));
let block = Block::default().black();
f.render_widget(block, size);
let chunks = Layout::default()
@@ -135,20 +135,11 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
let text = vec![
Line::from("This is a line "),
Line::from(Span::styled(
"This is a line ",
Style::default().fg(Color::Red),
)),
Line::from(Span::styled(
"This is a line",
Style::default().bg(Color::DarkGray),
)),
Line::from(Span::styled(
"This is a longer line",
Style::default().add_modifier(Modifier::CROSSED_OUT),
)),
Line::from(Span::styled(&long_line, Style::default())),
Line::from(Span::styled("This is a line", Style::default())),
Line::from("This is a line ".red()),
Line::from("This is a line".on_dark_gray()),
Line::from("This is a longer line".crossed_out()),
Line::from(long_line.reset()),
Line::from("This is a line".reset()),
Line::from(vec![
Span::raw("Masked text: "),
Span::styled(
@@ -157,20 +148,11 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
),
]),
Line::from("This is a line "),
Line::from(Span::styled(
"This is a line ",
Style::default().fg(Color::Red),
)),
Line::from(Span::styled(
"This is a line",
Style::default().bg(Color::DarkGray),
)),
Line::from(Span::styled(
"This is a longer line",
Style::default().add_modifier(Modifier::CROSSED_OUT),
)),
Line::from(Span::styled(&long_line, Style::default())),
Line::from(Span::styled("This is a line", Style::default())),
Line::from("This is a line ".red()),
Line::from("This is a line".on_dark_gray()),
Line::from("This is a longer line".crossed_out()),
Line::from(long_line.reset()),
Line::from("This is a line".reset()),
Line::from(vec![
Span::raw("Masked text: "),
Span::styled(
@@ -187,7 +169,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
let create_block = |title| {
Block::default()
.borders(Borders::ALL)
.style(Style::default().fg(Color::Gray))
.gray()
.title(Span::styled(
title,
Style::default().add_modifier(Modifier::BOLD),
@@ -200,7 +182,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
f.render_widget(title, chunks[0]);
let paragraph = Paragraph::new(text.clone())
.style(Style::default().fg(Color::Gray))
.gray()
.block(create_block("Vertical scrollbar with arrows"))
.scroll((app.vertical_scroll as u16, 0));
f.render_widget(paragraph, chunks[1]);
@@ -214,7 +196,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
);
let paragraph = Paragraph::new(text.clone())
.style(Style::default().fg(Color::Gray))
.gray()
.block(create_block(
"Vertical scrollbar without arrows and mirrored",
))
@@ -234,7 +216,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
);
let paragraph = Paragraph::new(text.clone())
.style(Style::default().fg(Color::Gray))
.gray()
.block(create_block(
"Horizontal scrollbar with only begin arrow & custom thumb symbol",
))
@@ -253,7 +235,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
);
let paragraph = Paragraph::new(text.clone())
.style(Style::default().fg(Color::Gray))
.gray()
.block(create_block(
"Horizontal scrollbar without arrows & custom thumb and track symbol",
))

11
examples/tabs.rs
View File

@@ -8,8 +8,8 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Constraint, Direction, Layout},
style::{Color, Modifier, Style},
text::{Line, Span},
style::{Color, Modifier, Style, Stylize},
text::Line,
widgets::{Block, Borders, Tabs},
Frame, Terminal,
};
@@ -93,17 +93,14 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
.constraints([Constraint::Length(3), Constraint::Min(0)].as_ref())
.split(size);
let block = Block::default().style(Style::default().bg(Color::White).fg(Color::Black));
let block = Block::default().on_white().black();
f.render_widget(block, size);
let titles = app
.titles
.iter()
.map(|t| {
let (first, rest) = t.split_at(1);
Line::from(vec![
Span::styled(first, Style::default().fg(Color::Yellow)),
Span::styled(rest, Style::default().fg(Color::Green)),
])
Line::from(vec![first.yellow(), rest.green()])
})
.collect();
let tabs = Tabs::new(titles)

22
examples/user_input.rs
View File

@@ -19,7 +19,7 @@ use crossterm::{
use ratatui::{
backend::{Backend, CrosstermBackend},
layout::{Constraint, Direction, Layout},
style::{Color, Modifier, Style},
style::{Color, Modifier, Style, Stylize},
text::{Line, Span, Text},
widgets::{Block, Borders, List, ListItem, Paragraph},
Frame, Terminal,
@@ -132,21 +132,21 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
let (msg, style) = match app.input_mode {
InputMode::Normal => (
vec![
Span::raw("Press "),
Span::styled("q", Style::default().add_modifier(Modifier::BOLD)),
Span::raw(" to exit, "),
Span::styled("e", Style::default().add_modifier(Modifier::BOLD)),
Span::raw(" to start editing."),
"Press ".into(),
"q".bold(),
" to exist, ".into(),
"e".bold(),
" to start editing.".bold(),
],
Style::default().add_modifier(Modifier::RAPID_BLINK),
),
InputMode::Editing => (
vec![
Span::raw("Press "),
Span::styled("Esc", Style::default().add_modifier(Modifier::BOLD)),
Span::raw(" to stop editing, "),
Span::styled("Enter", Style::default().add_modifier(Modifier::BOLD)),
Span::raw(" to record the message"),
"Press ".into(),
"Esc".bold(),
" to stop editing, ".into(),
"Enter".bold(),
" to record the message".into(),
],
Style::default(),
),