Skip to content

Commit

Permalink
docs: rearrange the ui methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshka
joshka committed Sep 23, 2023
1 parent d40f294 commit 2276283
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 143 deletions.
144 changes: 75 additions & 69 deletions README.md
View file
Expand Up @@ -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<bool> {
if event::poll(std::time::Duration::from_millis(50))? {
if let Event::Key(key) = event::read()? {
Expand All @@ -170,6 +162,14 @@ fn handle_events() -> io::Result<bool> {
}
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:
Expand All @@ -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:
Expand All @@ -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:
Expand Down
149 changes: 75 additions & 74 deletions src/lib.rs
View file
Expand Up @@ -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<bool> {
//! if event::poll(std::time::Duration::from_millis(50))? {
//! if let Event::Key(key) = event::read()? {
Expand All @@ -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:
Expand All @@ -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:
Expand All @@ -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:
Expand Down

0 comments on commit 2276283

Please sign in to comment.