From 22762838736f20a076d816cf9cbb38c5dcc2b27e Mon Sep 17 00:00:00 2001 From: Josh McKinney Date: Fri, 22 Sep 2023 21:18:10 -0700 Subject: [PATCH] docs: rearrange the ui methods --- README.md | 144 ++++++++++++++++++++++++++------------------------- src/lib.rs | 149 +++++++++++++++++++++++++++-------------------------- 2 files changed, 150 insertions(+), 143 deletions(-) diff --git a/README.md b/README.md index fc9120c36..2e0b0cd53 100644 --- a/README.md +++ b/README.md @@ -152,14 +152,6 @@ fn main() -> io::Result<()> { Ok(()) } -fn ui(frame: &mut Frame) { - frame.render_widget( - Paragraph::new("Hello World!") - .block(Block::default().title("Greeting").borders(Borders::ALL)), - frame.size(), - ); -} - fn handle_events() -> io::Result { if event::poll(std::time::Duration::from_millis(50))? { if let Event::Key(key) = event::read()? { @@ -170,6 +162,14 @@ fn handle_events() -> io::Result { } Ok(false) } + +fn ui(frame: &mut Frame) { + frame.render_widget( + Paragraph::new("Hello World!") + .block(Block::default().title("Greeting").borders(Borders::ALL)), + frame.size(), + ); +} ``` Running this example produces the following output: @@ -184,29 +184,33 @@ area. This lets you describe a responsive terminal UI by nesting layouts. See th section of the [Ratatui Book] for more info. ```rust -let areas = Layout::default() - .direction(Direction::Vertical) - .constraints(vec![ - Constraint::Length(1), - Constraint::Min(0), - Constraint::Length(1), - ]) - .split(frame.size()); -frame.render_widget(Paragraph::new("Title Bar"), areas[0]); -frame.render_widget(Paragraph::new("Status Bar"), areas[2]); - -let areas = Layout::default() - .direction(Direction::Horizontal) - .constraints(vec![Constraint::Percentage(50), Constraint::Percentage(50)]) - .split(areas[1]); -frame.render_widget( - Block::default().borders(Borders::ALL).title("Left"), - areas[0], -); -frame.render_widget( - Block::default().borders(Borders::ALL).title("Right"), - areas[1], -); +use ratatui::{prelude::*, widgets::*}; + +fn ui(frame: &mut Frame) { + let areas = Layout::default() + .direction(Direction::Vertical) + .constraints(vec![ + Constraint::Length(1), + Constraint::Min(0), + Constraint::Length(1), + ]) + .split(frame.size()); + frame.render_widget(Paragraph::new("Title Bar"), areas[0]); + frame.render_widget(Paragraph::new("Status Bar"), areas[2]); + + let areas = Layout::default() + .direction(Direction::Horizontal) + .constraints(vec![Constraint::Percentage(50), Constraint::Percentage(50)]) + .split(areas[1]); + frame.render_widget( + Block::default().borders(Borders::ALL).title("Left"), + areas[0], + ); + frame.render_widget( + Block::default().borders(Borders::ALL).title("Right"), + areas[1], + ); +} ``` Running this example produces the following output: @@ -228,44 +232,46 @@ short-hand syntax to apply a style to widgets and text. See the [Styling Text] s ```rust use ratatui::{prelude::*, widgets::*}; -let areas = Layout::default() - .direction(Direction::Vertical) - .constraints(vec![ - Constraint::Length(1), - Constraint::Length(1), - Constraint::Length(1), - Constraint::Length(1), - Constraint::Min(0), - ]) - .split(frame.size()); - -let span1 = Span::raw("Hello "); -let span2 = Span::styled( - "World", - Style::new() - .fg(Color::Green) - .bg(Color::White) - .add_modifier(Modifier::BOLD), -); -let span3 = "!".red().on_light_yellow().italic(); - -let line = Line::from(vec![span1, span2, span3]); -let text: Text = Text::from(vec![line]); - -frame.render_widget(Paragraph::new(text), areas[0]); -// or using the short-hand syntax and implicit conversions -frame.render_widget( - Paragraph::new("Hello World!".red().on_white().bold()), - areas[1], -); - -// to style the whole widget instead of just the text -frame.render_widget( - Paragraph::new("Hello World!").style(Style::new().red().on_white()), - areas[2], -); -// or using the short-hand syntax -frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]); +fn ui(frame: &mut Frame) { + let areas = Layout::default() + .direction(Direction::Vertical) + .constraints(vec![ + Constraint::Length(1), + Constraint::Length(1), + Constraint::Length(1), + Constraint::Length(1), + Constraint::Min(0), + ]) + .split(frame.size()); + + let span1 = Span::raw("Hello "); + let span2 = Span::styled( + "World", + Style::new() + .fg(Color::Green) + .bg(Color::White) + .add_modifier(Modifier::BOLD), + ); + let span3 = "!".red().on_light_yellow().italic(); + + let line = Line::from(vec![span1, span2, span3]); + let text: Text = Text::from(vec![line]); + + frame.render_widget(Paragraph::new(text), areas[0]); + // or using the short-hand syntax and implicit conversions + frame.render_widget( + Paragraph::new("Hello World!".red().on_white().bold()), + areas[1], + ); + + // to style the whole widget instead of just the text + frame.render_widget( + Paragraph::new("Hello World!").style(Style::new().red().on_white()), + areas[2], + ); + // or using the short-hand syntax + frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]); +} ``` Running this example produces the following output: diff --git a/src/lib.rs b/src/lib.rs index a3b94e884..9ac35ee1c 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -131,14 +131,6 @@ //! Ok(()) //! } //! -//! fn ui(frame: &mut Frame) { -//! frame.render_widget( -//! Paragraph::new("Hello World!") -//! .block(Block::default().title("Greeting").borders(Borders::ALL)), -//! frame.size(), -//! ); -//! } -//! //! fn handle_events() -> io::Result { //! if event::poll(std::time::Duration::from_millis(50))? { //! if let Event::Key(key) = event::read()? { @@ -149,6 +141,14 @@ //! } //! Ok(false) //! } +//! +//! fn ui(frame: &mut Frame) { +//! frame.render_widget( +//! Paragraph::new("Hello World!") +//! .block(Block::default().title("Greeting").borders(Borders::ALL)), +//! frame.size(), +//! ); +//! } //! ``` //! //! Running this example produces the following output: @@ -163,32 +163,33 @@ //! section of the [Ratatui Book] for more info. //! //! ```rust,no_run -//! # use ratatui::{prelude::*, widgets::*}; -//! # fn ui(frame: &mut Frame) { -//! let areas = Layout::default() -//! .direction(Direction::Vertical) -//! .constraints(vec![ -//! Constraint::Length(1), -//! Constraint::Min(0), -//! Constraint::Length(1), -//! ]) -//! .split(frame.size()); -//! frame.render_widget(Paragraph::new("Title Bar"), areas[0]); -//! frame.render_widget(Paragraph::new("Status Bar"), areas[2]); -//! -//! let areas = Layout::default() -//! .direction(Direction::Horizontal) -//! .constraints(vec![Constraint::Percentage(50), Constraint::Percentage(50)]) -//! .split(areas[1]); -//! frame.render_widget( -//! Block::default().borders(Borders::ALL).title("Left"), -//! areas[0], -//! ); -//! frame.render_widget( -//! Block::default().borders(Borders::ALL).title("Right"), -//! areas[1], -//! ); -//! # } +//! use ratatui::{prelude::*, widgets::*}; +//! +//! fn ui(frame: &mut Frame) { +//! let areas = Layout::default() +//! .direction(Direction::Vertical) +//! .constraints(vec![ +//! Constraint::Length(1), +//! Constraint::Min(0), +//! Constraint::Length(1), +//! ]) +//! .split(frame.size()); +//! frame.render_widget(Paragraph::new("Title Bar"), areas[0]); +//! frame.render_widget(Paragraph::new("Status Bar"), areas[2]); +//! +//! let areas = Layout::default() +//! .direction(Direction::Horizontal) +//! .constraints(vec![Constraint::Percentage(50), Constraint::Percentage(50)]) +//! .split(areas[1]); +//! frame.render_widget( +//! Block::default().borders(Borders::ALL).title("Left"), +//! areas[0], +//! ); +//! frame.render_widget( +//! Block::default().borders(Borders::ALL).title("Right"), +//! areas[1], +//! ); +//! } //! ``` //! //! Running this example produces the following output: @@ -210,46 +211,46 @@ //! ```rust,no_run //! use ratatui::{prelude::*, widgets::*}; //! -//! # fn ui(frame: &mut Frame) { -//! let areas = Layout::default() -//! .direction(Direction::Vertical) -//! .constraints(vec![ -//! Constraint::Length(1), -//! Constraint::Length(1), -//! Constraint::Length(1), -//! Constraint::Length(1), -//! Constraint::Min(0), -//! ]) -//! .split(frame.size()); -//! -//! let span1 = Span::raw("Hello "); -//! let span2 = Span::styled( -//! "World", -//! Style::new() -//! .fg(Color::Green) -//! .bg(Color::White) -//! .add_modifier(Modifier::BOLD), -//! ); -//! let span3 = "!".red().on_light_yellow().italic(); -//! -//! let line = Line::from(vec![span1, span2, span3]); -//! let text: Text = Text::from(vec![line]); -//! -//! frame.render_widget(Paragraph::new(text), areas[0]); -//! // or using the short-hand syntax and implicit conversions -//! frame.render_widget( -//! Paragraph::new("Hello World!".red().on_white().bold()), -//! areas[1], -//! ); -//! -//! // to style the whole widget instead of just the text -//! frame.render_widget( -//! Paragraph::new("Hello World!").style(Style::new().red().on_white()), -//! areas[2], -//! ); -//! // or using the short-hand syntax -//! frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]); -//! # } +//! fn ui(frame: &mut Frame) { +//! let areas = Layout::default() +//! .direction(Direction::Vertical) +//! .constraints(vec![ +//! Constraint::Length(1), +//! Constraint::Length(1), +//! Constraint::Length(1), +//! Constraint::Length(1), +//! Constraint::Min(0), +//! ]) +//! .split(frame.size()); +//! +//! let span1 = Span::raw("Hello "); +//! let span2 = Span::styled( +//! "World", +//! Style::new() +//! .fg(Color::Green) +//! .bg(Color::White) +//! .add_modifier(Modifier::BOLD), +//! ); +//! let span3 = "!".red().on_light_yellow().italic(); +//! +//! let line = Line::from(vec![span1, span2, span3]); +//! let text: Text = Text::from(vec![line]); +//! +//! frame.render_widget(Paragraph::new(text), areas[0]); +//! // or using the short-hand syntax and implicit conversions +//! frame.render_widget( +//! Paragraph::new("Hello World!".red().on_white().bold()), +//! areas[1], +//! ); +//! +//! // to style the whole widget instead of just the text +//! frame.render_widget( +//! Paragraph::new("Hello World!").style(Style::new().red().on_white()), +//! areas[2], +//! ); +//! // or using the short-hand syntax +//! frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]); +//! } //! ``` //! //! Running this example produces the following output: