mirror of
https://github.com/ratatui/ratatui.git
synced 2025-09-27 13:01:13 +00:00
118 lines
4.5 KiB
Rust
118 lines
4.5 KiB
Rust
//! # [Ratatui] [`Block`] with collapsed borders example
|
|
//!
|
|
//! The latest version of this example is available in the [widget examples] folder in the
|
|
//! repository.
|
|
//!
|
|
//! Please note that the examples are designed to be run against the `main` branch of the Github
|
|
//! repository. This means that you may not be able to compile with the latest release version on
|
|
//! crates.io, or the one that you have installed locally.
|
|
//!
|
|
//! See the [examples readme] for more information on finding examples that match the version of the
|
|
//! library you are using.
|
|
//!
|
|
//! [Ratatui]: https://github.com/ratatui/ratatui
|
|
//! [widget examples]: https://github.com/ratatui/ratatui/blob/main/ratatui-widgets/examples
|
|
//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
|
|
|
|
use std::collections::HashMap;
|
|
|
|
use color_eyre::Result;
|
|
use crossterm::event;
|
|
use ratatui::Frame;
|
|
use ratatui::layout::{Constraint, Layout, Rect, Spacing};
|
|
use ratatui::style::{Color, Stylize};
|
|
use ratatui::symbols::merge::MergeStrategy;
|
|
use ratatui::text::Line;
|
|
use ratatui::widgets::{Block, BorderType};
|
|
|
|
fn main() -> Result<()> {
|
|
color_eyre::install()?;
|
|
ratatui::run(|terminal| {
|
|
let mut selected_pane = Pane::Top;
|
|
loop {
|
|
terminal.draw(|frame| render(frame, selected_pane))?;
|
|
if let Some(key_event) = event::read()?.as_key_press_event() {
|
|
match key_event.code {
|
|
event::KeyCode::Up => selected_pane = Pane::Top,
|
|
event::KeyCode::Left => selected_pane = Pane::Left,
|
|
event::KeyCode::Right => selected_pane = Pane::Right,
|
|
event::KeyCode::Down => selected_pane = Pane::Bottom,
|
|
event::KeyCode::Char('q') => return Ok(()),
|
|
_ => {}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// Derive Eq, PartialEq, Hash for Pane to use as HashMap key
|
|
#[derive(Copy, Clone, Eq, PartialEq, Hash)]
|
|
enum Pane {
|
|
Top,
|
|
Left,
|
|
Right,
|
|
Bottom,
|
|
}
|
|
|
|
/// Render the UI with various blocks.
|
|
fn render(frame: &mut Frame, selected_pane: Pane) {
|
|
let [title, blocks] = frame.area().layout(&Layout::vertical([
|
|
Constraint::Length(1),
|
|
Constraint::Fill(1),
|
|
]));
|
|
|
|
render_title(frame, title);
|
|
render_blocks(selected_pane, frame, blocks);
|
|
}
|
|
|
|
fn render_title(frame: &mut Frame<'_>, area: Rect) {
|
|
let title = Line::from_iter([
|
|
"Block With Collapsed Borders".bold(),
|
|
" (Press 'q' to quit)".into(),
|
|
]);
|
|
frame.render_widget(title.centered(), area);
|
|
}
|
|
|
|
fn render_blocks(selected_pane: Pane, frame: &mut Frame<'_>, area: Rect) {
|
|
// The recipe to achieve collapsed borders is as follows:
|
|
// 1. Use `MergeStrategy::Exact` (or `MergeStrategy::Fuzzy`) to merge borders of adjacent
|
|
// blocks.
|
|
// 2. Use a layout with `Spacing::Overlap(1)` to ensure that the borders overlap
|
|
// 3. Use `BorderType::Thick` for the selected pane to make it visually distinct.
|
|
// 4. Render the selected pane last so it appears on top of the others.
|
|
let [top, middle, bottom] =
|
|
area.layout(&Layout::vertical([Constraint::Fill(1); 3]).spacing(Spacing::Overlap(1)));
|
|
let [left, right] =
|
|
middle.layout(&Layout::horizontal([Constraint::Fill(1); 2]).spacing(Spacing::Overlap(1)));
|
|
|
|
// Store pane areas and titles in a single HashMap indexed by Pane. A real application might
|
|
// store actual data or widgets in these areas instead (and use `WidgetRef` to handle
|
|
// heterogeneous widgets).
|
|
let mut panes = HashMap::new();
|
|
panes.insert(Pane::Top, (top, "Top Block"));
|
|
panes.insert(Pane::Left, (left, "Left Block"));
|
|
panes.insert(Pane::Right, (right, "Right Block"));
|
|
panes.insert(Pane::Bottom, (bottom, "Bottom Block"));
|
|
|
|
// Render all panes except the selected one first
|
|
for (&pane, &(area, title)) in &panes {
|
|
if pane != selected_pane {
|
|
// MergeStrategy::Exact causes the borders to collapse
|
|
let block = Block::bordered()
|
|
.merge_borders(MergeStrategy::Exact)
|
|
.title(title);
|
|
frame.render_widget(block, area);
|
|
}
|
|
}
|
|
// Render the selected pane last (so it appears on top) with a thick border
|
|
if let Some(&(area, title)) = panes.get(&selected_pane) {
|
|
// MergeStrategy::Exact causes the borders to collapse
|
|
let block = Block::bordered()
|
|
.merge_borders(MergeStrategy::Exact)
|
|
.border_type(BorderType::Thick)
|
|
.border_style(Color::Yellow)
|
|
.title(title);
|
|
frame.render_widget(block, area);
|
|
}
|
|
}
|