Mirrors/ratatui
2
0
Fork 0
mirror of https://github.com/ratatui-org/ratatui synced 2024-11-10 07:04:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: update main lib.rs / README examples (#1280)

Browse source
This commit is contained in:
Josh McKinney 2024-08-04 05:09:28 -07:00 committed by GitHub
parent cd0d31c2dc
commit f77503050f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 100 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
README.md
View file

@ -128,6 +128,7 @@ Website] for more info. For example, if you are using [Crossterm], you can use t
use std::io::{self, stdout}; use std::io::{self, stdout};
use ratatui::{ use ratatui::{
backend::CrosstermBackend,
crossterm::{ crossterm::{
event::{self, Event, KeyCode}, event::{self, Event, KeyCode},
terminal::{ terminal::{
@ -135,8 +136,8 @@ use ratatui::{
}, },
ExecutableCommand, ExecutableCommand,
}, },
prelude::*, widgets::{Block, Paragraph},
widgets::*, Frame, Terminal,
}; };
fn main() -> io::Result<()> { fn main() -> io::Result<()> {
@ -186,34 +187,27 @@ area. This lets you describe a responsive terminal UI by nesting layouts. See th
section of the [Ratatui Website] for more info. section of the [Ratatui Website] for more info.
```rust ```rust
use ratatui::{prelude::*, widgets::*}; use ratatui::{
layout::{Constraint, Layout},
widgets::Block,
Frame,
};
fn ui(frame: &mut Frame) { fn ui(frame: &mut Frame) {
let main_layout = Layout::new( let [title_area, main_area, status_area] = Layout::vertical([
Direction::Vertical,
[
Constraint::Length(1), Constraint::Length(1),
Constraint::Min(0), Constraint::Min(0),
Constraint::Length(1), Constraint::Length(1),
], ])
) .areas(frame.size());
.split(frame.size()); let [left_area, right_area] =
frame.render_widget( Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)])
Block::new().borders(Borders::TOP).title("Title Bar"), .areas(main_area);
main_layout[0],
);
frame.render_widget(
Block::new().borders(Borders::TOP).title("Status Bar"),
main_layout[2],
);
let inner_layout = Layout::new( frame.render_widget(Block::bordered().title("Title Bar"), title_area);
Direction::Horizontal, frame.render_widget(Block::bordered().title("Status Bar"), status_area);
[Constraint::Percentage(50), Constraint::Percentage(50)], frame.render_widget(Block::bordered().title("Left"), left_area);
) frame.render_widget(Block::bordered().title("Right"), right_area);
.split(main_layout[1]);
frame.render_widget(Block::bordered().title("Left"), inner_layout[0]);
frame.render_widget(Block::bordered().title("Right"), inner_layout[1]);
} }
``` ```
@ -234,48 +228,41 @@ short-hand syntax to apply a style to widgets and text. See the [Styling Text] s
[Ratatui Website] for more info. [Ratatui Website] for more info.
```rust ```rust
use ratatui::{prelude::*, widgets::*}; use ratatui::{
layout::{Constraint, Layout},
style::{Color, Modifier, Style, Stylize},
text::{Line, Span},
widgets::{Block, Paragraph},
Frame,
};
fn ui(frame: &mut Frame) { fn ui(frame: &mut Frame) {
let areas = Layout::new( let areas = Layout::vertical([Constraint::Length(1); 4]).split(frame.size());
Direction::Vertical,
[
Constraint::Length(1),
Constraint::Length(1),
Constraint::Length(1),
Constraint::Length(1),
Constraint::Min(0),
],
)
.split(frame.size());
let span1 = Span::raw("Hello "); let line = Line::from(vec![
let span2 = Span::styled( Span::raw("Hello "),
Span::styled(
"World", "World",
Style::new() Style::new()
.fg(Color::Green) .fg(Color::Green)
.bg(Color::White) .bg(Color::White)
.add_modifier(Modifier::BOLD), .add_modifier(Modifier::BOLD),
); ),
let span3 = "!".red().on_light_yellow().italic(); "!".red().on_light_yellow().italic(),
]);
frame.render_widget(line, areas[0]);
let line = Line::from(vec![span1, span2, span3]); // using the short-hand syntax and implicit conversions
let text: Text = Text::from(vec![line]); let paragraph = Paragraph::new("Hello World!".red().on_white().bold());
frame.render_widget(paragraph, areas[1]);
frame.render_widget(Paragraph::new(text), areas[0]); // style the whole widget instead of just the text
// or using the short-hand syntax and implicit conversions let paragraph = Paragraph::new("Hello World!").style(Style::new().red().on_white());
frame.render_widget( frame.render_widget(paragraph, areas[2]);
Paragraph::new("Hello World!".red().on_white().bold()),
areas[1],
);
// to style the whole widget instead of just the text // use the simpler short-hand syntax
frame.render_widget( let paragraph = Paragraph::new("Hello World!").blue().on_yellow();
Paragraph::new("Hello World!").style(Style::new().red().on_white()), frame.render_widget(paragraph, areas[3]);
areas[2],
);
// or using the short-hand syntax
frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]);
} }
``` ```

97
src/lib.rs
View file

@ -105,6 +105,7 @@
//! use std::io::{self, stdout}; //! use std::io::{self, stdout};
//! //!
//! use ratatui::{ //! use ratatui::{
//! backend::CrosstermBackend,
//! crossterm::{ //! crossterm::{
//! event::{self, Event, KeyCode}, //! event::{self, Event, KeyCode},
//! terminal::{ //! terminal::{
@ -112,8 +113,8 @@
//! }, //! },
//! ExecutableCommand, //! ExecutableCommand,
//! }, //! },
//! prelude::*, //! widgets::{Block, Paragraph},
//! widgets::*, //! Frame, Terminal,
//! }; //! };
//! //!
//! fn main() -> io::Result<()> { //! fn main() -> io::Result<()> {
@ -163,34 +164,27 @@
//! section of the [Ratatui Website] for more info. //! section of the [Ratatui Website] for more info.
//! //!
//! ```rust,no_run //! ```rust,no_run
//! use ratatui::{prelude::*, widgets::*}; //! use ratatui::{
//! layout::{Constraint, Layout},
//! widgets::Block,
//! Frame,
//! };
//! //!
//! fn ui(frame: &mut Frame) { //! fn ui(frame: &mut Frame) {
//! let main_layout = Layout::new( //! let [title_area, main_area, status_area] = Layout::vertical([
//! Direction::Vertical,
//! [
//! Constraint::Length(1), //! Constraint::Length(1),
//! Constraint::Min(0), //! Constraint::Min(0),
//! Constraint::Length(1), //! Constraint::Length(1),
//! ], //! ])
//! ) //! .areas(frame.size());
//! .split(frame.size()); //! let [left_area, right_area] =
//! frame.render_widget( //! Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)])
//! Block::new().borders(Borders::TOP).title("Title Bar"), //! .areas(main_area);
//! main_layout[0],
//! );
//! frame.render_widget(
//! Block::new().borders(Borders::TOP).title("Status Bar"),
//! main_layout[2],
//! );
//! //!
//! let inner_layout = Layout::new( //! frame.render_widget(Block::bordered().title("Title Bar"), title_area);
//! Direction::Horizontal, //! frame.render_widget(Block::bordered().title("Status Bar"), status_area);
//! [Constraint::Percentage(50), Constraint::Percentage(50)], //! frame.render_widget(Block::bordered().title("Left"), left_area);
//! ) //! frame.render_widget(Block::bordered().title("Right"), right_area);
//! .split(main_layout[1]);
//! frame.render_widget(Block::bordered().title("Left"), inner_layout[0]);
//! frame.render_widget(Block::bordered().title("Right"), inner_layout[1]);
//! } //! }
//! ``` //! ```
//! //!
@ -211,48 +205,41 @@
//! [Ratatui Website] for more info. //! [Ratatui Website] for more info.
//! //!
//! ```rust,no_run //! ```rust,no_run
//! use ratatui::{prelude::*, widgets::*}; //! use ratatui::{
//! layout::{Constraint, Layout},
//! style::{Color, Modifier, Style, Stylize},
//! text::{Line, Span},
//! widgets::{Block, Paragraph},
//! Frame,
//! };
//! //!
//! fn ui(frame: &mut Frame) { //! fn ui(frame: &mut Frame) {
//! let areas = Layout::new( //! let areas = Layout::vertical([Constraint::Length(1); 4]).split(frame.size());
//! Direction::Vertical,
//! [
//! Constraint::Length(1),
//! Constraint::Length(1),
//! Constraint::Length(1),
//! Constraint::Length(1),
//! Constraint::Min(0),
//! ],
//! )
//! .split(frame.size());
//! //!
//! let span1 = Span::raw("Hello "); //! let line = Line::from(vec![
//! let span2 = Span::styled( //! Span::raw("Hello "),
//! Span::styled(
//! "World", //! "World",
//! Style::new() //! Style::new()
//! .fg(Color::Green) //! .fg(Color::Green)
//! .bg(Color::White) //! .bg(Color::White)
//! .add_modifier(Modifier::BOLD), //! .add_modifier(Modifier::BOLD),
//! ); //! ),
//! let span3 = "!".red().on_light_yellow().italic(); //! "!".red().on_light_yellow().italic(),
//! ]);
//! frame.render_widget(line, areas[0]);
//! //!
//! let line = Line::from(vec![span1, span2, span3]); //! // using the short-hand syntax and implicit conversions
//! let text: Text = Text::from(vec![line]); //! let paragraph = Paragraph::new("Hello World!".red().on_white().bold());
//! frame.render_widget(paragraph, areas[1]);
//! //!
//! frame.render_widget(Paragraph::new(text), areas[0]); //! // style the whole widget instead of just the text
//! // or using the short-hand syntax and implicit conversions //! let paragraph = Paragraph::new("Hello World!").style(Style::new().red().on_white());
//! frame.render_widget( //! frame.render_widget(paragraph, areas[2]);
//! Paragraph::new("Hello World!".red().on_white().bold()),
//! areas[1],
//! );
//! //!
//! // to style the whole widget instead of just the text //! // use the simpler short-hand syntax
//! frame.render_widget( //! let paragraph = Paragraph::new("Hello World!").blue().on_yellow();
//! Paragraph::new("Hello World!").style(Style::new().red().on_white()), //! frame.render_widget(paragraph, areas[3]);
//! areas[2],
//! );
//! // or using the short-hand syntax
//! frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]);
//! } //! }
//! ``` //! ```
//! //!