Components / DockArea
DockArea
Panels in a tree of splits and tabs that move by a drag, by keys or by a menu, resize, collapse, close, and save their arrangement as text.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn dock_area() -> impl View {
let layout = State::new(
DockLayout::new()
.center(DockNode::tabs(["photo", "grid"]))
.left(DockNode::tabs(["folders", "search"]), 220.0)
.right(DockNode::vertical([DockNode::tabs(["layers"]), DockNode::tabs(["history"])]), 200.0)
.bottom(DockNode::tabs(["log"]), 110.0),
);
let panels = vec![
DockPanel::new("photo", "Photo").icon(IconName::Camera).closable(false),
DockPanel::new("grid", "Grid"),
DockPanel::new("folders", "Folders").icon(IconName::Folder),
DockPanel::new("search", "Search").icon(IconName::Search),
DockPanel::new("layers", "Layers"),
DockPanel::new("history", "History"),
DockPanel::new("log", "Log"),
];
DockArea::new(layout.binding(), panels, |id| -> AnyView {
Box::new(VStack::new((Text::new(format!("What {id} shows")),)).padding(12.0))
})
// Keep this text, and give it to DockLayout::parse the next time.
.on_end(|layout| println!("{}", layout.to_text()))
.height(420.0)
}